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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
use dioxus::prelude::*;
/// Bootstrap Breadcrumb component.
///
/// # Bootstrap HTML → Dioxus
///
/// | HTML | Dioxus |
/// |---|---|
/// | `<nav><ol class="breadcrumb"><li class="breadcrumb-item"><a href="/">Home</a></li>...` | `Breadcrumb { BreadcrumbItem { href: "/", "Home" } ... }` |
/// | `<li class="breadcrumb-item active" aria-current="page">Current</li>` | `BreadcrumbItem { active: true, "Current" }` |
///
/// ```rust
/// rsx! {
/// Breadcrumb {
/// BreadcrumbItem { href: "/", "Home" }
/// BreadcrumbItem { href: "/products", "Products" }
/// BreadcrumbItem { active: true, "Current Page" }
/// }
/// }
/// ```
#[derive(Clone, PartialEq, Props)]
pub struct BreadcrumbProps {
/// Additional CSS classes.
#[props(default)]
pub class: String,
/// Child elements (BreadcrumbItem components).
pub children: Element,
}
#[component]
pub fn Breadcrumb(props: BreadcrumbProps) -> Element {
let full_class = if props.class.is_empty() {
"breadcrumb".to_string()
} else {
format!("breadcrumb {}", props.class)
};
rsx! {
nav { "aria-label": "breadcrumb",
ol { class: "{full_class}", {props.children} }
}
}
}
/// A single item in a Breadcrumb.
#[derive(Clone, PartialEq, Props)]
pub struct BreadcrumbItemProps {
/// Link href. Not rendered if active.
#[props(default)]
pub href: String,
/// Active (current page) state — renders as plain text instead of link.
#[props(default)]
pub active: bool,
/// Additional CSS classes.
#[props(default)]
pub class: String,
/// Child elements.
pub children: Element,
}
#[component]
pub fn BreadcrumbItem(props: BreadcrumbItemProps) -> Element {
let mut classes = vec!["breadcrumb-item".to_string()];
if props.active {
classes.push("active".to_string());
}
if !props.class.is_empty() {
classes.push(props.class.clone());
}
let full_class = classes.join(" ");
if props.active {
rsx! {
li {
class: "{full_class}",
"aria-current": "page",
{props.children}
}
}
} else {
rsx! {
li { class: "{full_class}",
a { href: "{props.href}", {props.children} }
}
}
}
}