yew_bs/components/
nav.rs

1use yew::prelude::*;
2#[derive(Clone, Copy, PartialEq, Debug)]
3pub enum NavFill {
4    Fill,
5    Justified,
6}
7impl NavFill {
8    pub fn as_str(&self) -> &'static str {
9        match self {
10            NavFill::Fill => "nav-fill",
11            NavFill::Justified => "nav-justified",
12        }
13    }
14}
15/// Nav alignment
16#[derive(Clone, Copy, PartialEq, Debug)]
17pub enum NavAlign {
18    Start,
19    Center,
20    End,
21}
22impl NavAlign {
23    pub fn as_str(&self) -> &'static str {
24        match self {
25            NavAlign::Start => "justify-content-start",
26            NavAlign::Center => "justify-content-center",
27            NavAlign::End => "justify-content-end",
28        }
29    }
30}
31#[derive(Clone, Copy, PartialEq, Debug)]
32pub enum NavOrientation {
33    Horizontal,
34    Vertical,
35}
36impl NavOrientation {
37    pub fn as_str(&self) -> &'static str {
38        match self {
39            NavOrientation::Horizontal => "nav",
40            NavOrientation::Vertical => "flex-column",
41        }
42    }
43}
44/// Props for the Nav component
45#[derive(Properties, PartialEq)]
46pub struct NavProps {
47    /// Nav children
48    #[prop_or_default]
49    pub children: Children,
50    /// Whether to use pills style
51    #[prop_or_default]
52    pub pills: bool,
53    /// Whether to use tabs style
54    #[prop_or_default]
55    pub tabs: bool,
56    /// Fill behavior
57    #[prop_or_default]
58    pub fill: Option<NavFill>,
59    /// Alignment
60    #[prop_or_default]
61    pub align: Option<NavAlign>,
62    /// Orientation
63    #[prop_or_default]
64    pub orientation: Option<NavOrientation>,
65    /// Additional CSS classes
66    #[prop_or_default]
67    pub class: Option<AttrValue>,
68    /// Additional HTML attributes
69    #[prop_or_default]
70    pub node_ref: NodeRef,
71}
72/// Bootstrap Nav component
73#[function_component(Nav)]
74pub fn nav(props: &NavProps) -> Html {
75    let mut classes = Classes::new();
76    classes.push("nav");
77    if props.pills {
78        classes.push("nav-pills");
79    }
80    if props.tabs {
81        classes.push("nav-tabs");
82    }
83    if let Some(fill) = &props.fill {
84        classes.push(fill.as_str());
85    }
86    if let Some(align) = &props.align {
87        classes.push(align.as_str());
88    }
89    if let Some(orientation) = &props.orientation {
90        classes.push(orientation.as_str());
91    }
92    if let Some(class) = &props.class {
93        classes.push(class.to_string());
94    }
95    html! {
96        < ul class = { classes } ref = { props.node_ref.clone() } > { for props.children
97        .iter() } </ ul >
98    }
99}
100/// Props for the NavItem component
101#[derive(Properties, PartialEq)]
102pub struct NavItemProps {
103    /// NavItem children
104    #[prop_or_default]
105    pub children: Children,
106    /// Additional CSS classes
107    #[prop_or_default]
108    pub class: Option<AttrValue>,
109    /// Additional HTML attributes
110    #[prop_or_default]
111    pub node_ref: NodeRef,
112}
113/// Bootstrap NavItem component
114#[function_component(NavItem)]
115pub fn nav_item(props: &NavItemProps) -> Html {
116    let mut classes = Classes::new();
117    classes.push("nav-item");
118    if let Some(class) = &props.class {
119        classes.push(class.to_string());
120    }
121    html! {
122        < li class = { classes } ref = { props.node_ref.clone() } > { for props.children
123        .iter() } </ li >
124    }
125}
126/// Props for the NavLink component
127#[derive(Properties, PartialEq)]
128pub struct NavLinkProps {
129    /// NavLink children
130    #[prop_or_default]
131    pub children: Children,
132    /// Whether the link is active
133    #[prop_or_default]
134    pub active: bool,
135    /// Whether the link is disabled
136    #[prop_or_default]
137    pub disabled: bool,
138    /// Link href
139    #[prop_or_default]
140    pub href: Option<AttrValue>,
141    /// Click event handler
142    #[prop_or_default]
143    pub onclick: Option<Callback<MouseEvent>>,
144    /// Additional CSS classes
145    #[prop_or_default]
146    pub class: Option<AttrValue>,
147    /// Additional HTML attributes
148    #[prop_or_default]
149    pub node_ref: NodeRef,
150}
151/// Bootstrap NavLink component
152#[function_component(NavLink)]
153pub fn nav_link(props: &NavLinkProps) -> Html {
154    let mut classes = Classes::new();
155    classes.push("nav-link");
156    if props.active {
157        classes.push("active");
158    }
159    if props.disabled {
160        classes.push("disabled");
161    }
162    if let Some(class) = &props.class {
163        classes.push(class.to_string());
164    }
165    if let Some(href) = &props.href {
166        html! {
167            < a class = { classes } href = { href.clone() } onclick = { props.onclick
168            .clone() } aria - disabled = { props.disabled.to_string() } ref = { props
169            .node_ref.clone() } > { for props.children.iter() } </ a >
170        }
171    } else {
172        html! {
173            < button class = { classes } type = "button" onclick = { props.onclick
174            .clone() } disabled = { props.disabled } ref = { props.node_ref.clone() } > {
175            for props.children.iter() } </ button >
176        }
177    }
178}
yew_bs/components/nav.rs

yew_bs/components/
nav.rs
