yew_bs/components/
tab.rs

1use yew::prelude::*;
2#[derive(Properties, PartialEq)]
3pub struct TabContentProps {
4    #[prop_or_default]
5    pub children: Children,
6    #[prop_or_default]
7    pub class: Option<AttrValue>,
8    #[prop_or_default]
9    pub node_ref: NodeRef,
10}
11#[function_component(TabContent)]
12pub fn tab_content(props: &TabContentProps) -> Html {
13    let mut classes = Classes::new();
14    classes.push("tab-content");
15    if let Some(class) = &props.class {
16        classes.push(class.to_string());
17    }
18    html! {
19        < div class = { classes } ref = { props.node_ref.clone() } > { for props.children
20        .iter() } </ div >
21    }
22}
23#[derive(Properties, PartialEq)]
24pub struct TabPaneProps {
25    #[prop_or_default]
26    pub children: Children,
27    #[prop_or_default]
28    pub active: bool,
29    #[prop_or_default]
30    pub fade: bool,
31    #[prop_or_default]
32    pub id: Option<AttrValue>,
33    #[prop_or_default]
34    pub labelled_by: Option<AttrValue>,
35    #[prop_or_default]
36    pub class: Option<AttrValue>,
37    #[prop_or_default]
38    pub node_ref: NodeRef,
39}
40#[function_component(TabPane)]
41pub fn tab_pane(props: &TabPaneProps) -> Html {
42    let mut classes = Classes::new();
43    classes.push("tab-pane");
44    if props.active {
45        classes.push("active");
46    }
47    if props.fade {
48        classes.push("fade");
49        if props.active {
50            classes.push("show");
51        }
52    }
53    if let Some(class) = &props.class {
54        classes.push(class.to_string());
55    }
56    html! {
57        < div class = { classes } id = { props.id.clone() } role = "tabpanel" aria -
58        labelledby = { props.labelled_by.clone() } ref = { props.node_ref.clone() } > {
59        for props.children.iter() } </ div >
60    }
61}
62#[derive(Properties, PartialEq)]
63pub struct TabTriggerProps {
64    #[prop_or_default]
65    pub children: Children,
66    #[prop_or_default]
67    pub active: bool,
68    #[prop_or_default]
69    pub disabled: bool,
70    #[prop_or_default]
71    pub target: Option<AttrValue>,
72    #[prop_or_default]
73    pub onclick: Option<Callback<MouseEvent>>,
74    #[prop_or_default]
75    pub class: Option<AttrValue>,
76    #[prop_or_default]
77    pub node_ref: NodeRef,
78}
79#[function_component(TabTrigger)]
80pub fn tab_trigger(props: &TabTriggerProps) -> Html {
81    let mut classes = Classes::new();
82    classes.push("nav-link");
83    if props.active {
84        classes.push("active");
85    }
86    if props.disabled {
87        classes.push("disabled");
88    }
89    if let Some(class) = &props.class {
90        classes.push(class.to_string());
91    }
92    html! {
93        < button class = { classes } type = "button" role = "tab" data - bs - toggle =
94        "tab" data - bs - target = { props.target.clone() } aria - controls = { props
95        .target.clone() } aria - selected = { props.active.to_string() } disabled = {
96        props.disabled } onclick = { props.onclick.clone() } ref = { props.node_ref
97        .clone() } > { for props.children.iter() } </ button >
98    }
99}
yew_bs/components/tab.rs

yew_bs/components/
tab.rs
