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-v5-c-tab-content__body");
32
33    if props.padding {
34        class.push(classes!("pf-m-padding"));
35    }
36
37    html!(
38        <div {class}>
39            { props.children.clone() }
40        </div>
41    )
42}
43
44/// Properties for [`TabContent`]
45#[derive(PartialEq, Properties)]
46pub struct TabContentProperties {
47    #[prop_or_default]
48    pub id: Option<AttrValue>,
49
50    #[prop_or_default]
51    pub hidden: bool,
52
53    #[prop_or_default]
54    pub children: Html,
55
56    #[prop_or_default]
57    pub class: Classes,
58
59    #[prop_or_default]
60    pub style: Option<AttrValue>,
61}
62
63/// Tabs component body.
64///
65/// > A **tab content** component should be used with the tabs component.
66///
67/// See: <https://www.patternfly.org/components/tab-content>
68///
69/// ## Properties
70///
71/// Defined by [`TabContentProperties`].
72#[function_component(TabContent)]
73pub fn tab_content(props: &TabContentProperties) -> Html {
74    let mut class = Classes::from("pf-v5-c-tab-content");
75
76    class.extend(&props.class);
77
78    html!(
79        <section
80            id={props.id.clone()}
81            {class}
82            hidden={props.hidden}
83            tabindex="0"
84            role="tabpanel"
85            style={props.style.clone()}
86        >
87            { props.children.clone() }
88        </section>
89    )
90}
patternfly_yew/components/tabs/mod.rs

patternfly_yew/components/tabs/
mod.rs
