1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
use dioxus::prelude::*;
/// Tab item data.
#[derive(Clone, Debug, PartialEq)]
pub struct TabItem {
pub id: String,
pub label: String,
}
/// Tab navigation component.
#[component]
pub fn Tabs(
tabs: Vec<TabItem>,
active_tab: String,
on_change: EventHandler<String>,
) -> Element {
rsx! {
div {
class: "tabs",
for tab in tabs.iter() {
{
let tab_id = tab.id.clone();
let tab_label = tab.label.clone();
let is_active = tab.id == active_tab;
rsx! {
button {
class: if is_active {
"tabs__tab tabs__tab--active"
} else {
"tabs__tab"
},
onclick: move |_| on_change.call(tab_id.clone()),
"{tab_label}"
}
}
}
}
}
}
}