patternfly_yew/components/tabs/
mod.rs

1//! Tabs control
2#[cfg(feature = "yew-nested-router")]
3mod router;
4mod simple;
5
6#[cfg(feature = "yew-nested-router")]
7pub use router::*;
8pub use simple::*;
9
10use yew::prelude::*;
11
12/// Properties for [`TabContentBody`]
13#[derive(Clone, Debug, PartialEq, Properties)]
14pub struct TabContentBodyProperties {
15    #[prop_or_default]
16    pub children: Html,
17
18    #[prop_or_default]
19    pub padding: bool,
20}
21
22/// Tabs component body.
23///
24/// This is an optional sub-components used for styling the content of a tab.
25///
26/// ## Properties
27///
28/// Defined by [`TabContentBodyProperties`].
29#[function_component(TabContentBody)]
30pub fn tab_content_body(props: &TabContentBodyProperties) -> Html {
31    let mut class = classes!("pf-v6-c-tab-content__body");
32
33    if props.padding {
34        class.push(classes!("pf-m-padding"));
35    }
36
37    html!(<div {class}>{ props.children.clone() }</div>)
38}
39
40/// Properties for [`TabContent`]
41#[derive(PartialEq, Properties)]
42pub struct TabContentProperties {
43    #[prop_or_default]
44    pub id: Option<AttrValue>,
45
46    #[prop_or_default]
47    pub hidden: bool,
48
49    #[prop_or_default]
50    pub children: Html,
51
52    #[prop_or_default]
53    pub class: Classes,
54
55    #[prop_or_default]
56    pub style: Option<AttrValue>,
57}
58
59/// Tabs component body.
60///
61/// > A **tab content** component should be used with the tabs component.
62///
63/// See: <https://www.patternfly.org/components/tab-content>
64///
65/// ## Properties
66///
67/// Defined by [`TabContentProperties`].
68#[function_component(TabContent)]
69pub fn tab_content(props: &TabContentProperties) -> Html {
70    let mut class = Classes::from("pf-v6-c-tab-content");
71
72    class.extend(&props.class);
73
74    html!(
75        <section
76            id={props.id.clone()}
77            {class}
78            hidden={props.hidden}
79            tabindex="0"
80            role="tabpanel"
81            style={props.style.clone()}
82        >
83            { props.children.clone() }
84        </section>
85    )
86}
patternfly_yew/components/tabs/mod.rs

patternfly_yew/components/tabs/
mod.rs
