dioxus-bootstrap-css 0.5.1

Bootstrap 5.3 components for Dioxus — type-safe RSX wrappers powered by Bootstrap CSS
Documentation 
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
88
89
90
91

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,no_run
/// # use dioxus::prelude::*;
/// # use dioxus_bootstrap_css::prelude::*;
/// # fn _doctest() -> Element {
/// 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} }
            }
        }
    }
}