dioxus_bootstrap_css/
tabs.rs

1use dioxus::prelude::*;
2
3/// Definition for a single tab.
4///
5/// Used with [`TabList`] to define tab labels, icons, and content.
6///
7/// ```rust,no_run
8/// # use dioxus::prelude::*;
9/// # use dioxus_bootstrap_css::prelude::*;
10/// # fn _doctest() -> dioxus_bootstrap_css::tabs::TabDef {
11/// use dioxus_bootstrap_css::tabs::TabDef;
12///
13/// TabDef {
14///     label: "Home".into(),
15///     icon: Some("house".into()),  // Bootstrap Icon name without "bi-" prefix
16///     content: rsx! { p { "Home content" } },
17/// }
18/// # }
19/// ```
20#[derive(Clone, PartialEq)]
21pub struct TabDef {
22    /// Tab button label.
23    pub label: String,
24    /// Optional Bootstrap icon name (without "bi-" prefix).
25    pub icon: Option<String>,
26    /// Tab content.
27    pub content: Element,
28}
29
30/// Bootstrap Tabs component — signal-driven, no JavaScript.
31///
32/// Produces pixel-perfect Bootstrap 5.3 HTML with separated `<ul class="nav nav-tabs">`
33/// and `<div class="tab-content">` areas. This is the **recommended** component for tabs.
34///
35/// # Bootstrap HTML → Dioxus
36///
37/// ```html
38/// <!-- Bootstrap HTML -->
39/// <ul class="nav nav-tabs" role="tablist">
40///   <li class="nav-item"><button class="nav-link active">Home</button></li>
41///   <li class="nav-item"><button class="nav-link">Profile</button></li>
42/// </ul>
43/// <div class="tab-content border border-top-0 rounded-bottom p-3">
44///   <div class="tab-pane fade show active">Home content</div>
45///   <div class="tab-pane fade">Profile content</div>
46/// </div>
47/// ```
48///
49/// ```rust,no_run
50/// # use dioxus::prelude::*;
51/// # use dioxus_bootstrap_css::prelude::*;
52/// # fn _doctest() -> Element {
53/// use dioxus_bootstrap_css::tabs::TabDef;
54///
55/// let active = use_signal(|| 0usize);
56/// rsx! {
57///     TabList {
58///         active: active,
59///         content_class: "border border-top-0 rounded-bottom p-3",
60///         tabs: vec![
61///             TabDef { label: "Home".into(), icon: Some("house".into()),
62///                 content: rsx! { p { "Home content" } } },
63///             TabDef { label: "Profile".into(), icon: Some("person".into()),
64///                 content: rsx! { p { "Profile content" } } },
65///         ],
66///     }
67/// }
68/// # }
69/// ```
70///
71/// # Props
72///
73/// - `active` — `Signal<usize>` controlling active tab index
74/// - `tabs` — `Vec<TabDef>` defining each tab's label, icon, and content
75/// - `pills` — pill style instead of tabs
76/// - `fill` — fill available width
77/// - `justified` — equal-width items
78/// - `content_class` — additional CSS classes for the tab-content div
79///   (e.g., `"border border-top-0 rounded-bottom p-3"` for standard Bootstrap bordered tabs)
80#[derive(Clone, PartialEq, Props)]
81pub struct TabListProps {
82    /// Signal controlling the active tab index.
83    pub active: Signal<usize>,
84    /// Tab definitions.
85    pub tabs: Vec<TabDef>,
86    /// Use pill style.
87    #[props(default)]
88    pub pills: bool,
89    /// Fill available width.
90    #[props(default)]
91    pub fill: bool,
92    /// Justify items equally.
93    #[props(default)]
94    pub justified: bool,
95    /// Additional CSS classes for the nav.
96    #[props(default)]
97    pub class: String,
98    /// Additional CSS classes for the tab content area.
99    #[props(default)]
100    pub content_class: String,
101}
102
103#[component]
104pub fn TabList(props: TabListProps) -> Element {
105    let current = *props.active.read();
106    let mut active_signal = props.active;
107    let style = if props.pills { "nav-pills" } else { "nav-tabs" };
108
109    let mut nav_classes = vec![format!("nav {style}")];
110    if props.fill {
111        nav_classes.push("nav-fill".to_string());
112    }
113    if props.justified {
114        nav_classes.push("nav-justified".to_string());
115    }
116    if !props.class.is_empty() {
117        nav_classes.push(props.class.clone());
118    }
119    let nav_class = nav_classes.join(" ");
120
121    let content_class = if props.content_class.is_empty() {
122        "tab-content".to_string()
123    } else {
124        format!("tab-content {}", props.content_class)
125    };
126
127    rsx! {
128        ul { class: "{nav_class}", role: "tablist",
129            for (i, tab) in props.tabs.iter().enumerate() {
130                li { class: "nav-item", role: "presentation",
131                    button {
132                        class: if current == i { "nav-link active" } else { "nav-link" },
133                        r#type: "button",
134                        role: "tab",
135                        "aria-selected": if current == i { "true" } else { "false" },
136                        onclick: move |_| active_signal.set(i),
137                        if let Some(ref icon) = tab.icon {
138                            i { class: "bi bi-{icon} me-1" }
139                        }
140                        "{tab.label}"
141                    }
142                }
143            }
144        }
145        div { class: "{content_class}",
146            for (i, tab) in props.tabs.iter().enumerate() {
147                div {
148                    class: if current == i { "tab-pane fade show active" } else { "tab-pane fade" },
149                    role: "tabpanel",
150                    if current == i {
151                        {tab.content.clone()}
152                    }
153                }
154            }
155        }
156    }
157}
158
159/// Alias: `Tabs` works the same as `TabList`.
160///
161/// Both names produce identical output. `TabList` is the canonical name.
162#[component]
163pub fn Tabs(props: TabListProps) -> Element {
164    TabList(props)
165}
166
167/// Alias for TabListProps.
168pub type TabsProps = TabListProps;
dioxus_bootstrap_css/tabs.rs

dioxus_bootstrap_css/
tabs.rs
