dioxus-bootstrap 0.7.1

A set of Bootstrap-based components for Dioxus.
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
92
93
94
95
96
97
98
99
100
101
102
103
104

use dioxus::prelude::*;
use dioxus_router::navigation::NavigationTarget;
use dioxus_router::components::Link;

#[derive(Clone, Props, PartialEq)]
pub struct BreadcrumbProps {
    #[props(optional)]
    id: String,
    #[props(optional, default = "".to_string())]
    class: String,
    #[props(optional, default = "/".to_string())]
    divider: String,
    children: Element,
}

#[component]
pub fn Breadcrumb(props: BreadcrumbProps) -> Element {
    let mut class_list = vec!["breadcrumb".to_string()];
    
    if !props.class.is_empty() {
        class_list.push(props.class.clone());
    }
    
    let class_list = class_list.join(" ");
    let style = if props.divider != "/" {
        format!("--bs-breadcrumb-divider: '{}';", props.divider)
    } else {
        String::new()
    };
    
    rsx! {
        nav {
            id: props.id,
            "aria-label": "breadcrumb",
            ol {
                class: class_list,
                style: style,
                {props.children}
            }
        }
    }
}

#[derive(Clone, Props, PartialEq)]
pub struct BreadcrumbItemProps {
    #[props(optional)]
    id: String,
    #[props(optional, default = "".to_string())]
    class: String,
    #[props(optional, default = false)]
    active: bool,
    #[props(optional)]
    href: Option<String>,
    #[props(optional)]
    link_to: Option<NavigationTarget>,
    children: Element,
}

#[component]
pub fn BreadcrumbItem(props: BreadcrumbItemProps) -> Element {
    let mut class_list = vec!["breadcrumb-item".to_string()];
    
    if props.active {
        class_list.push("active".to_string());
    }
    
    if !props.class.is_empty() {
        class_list.push(props.class.clone());
    }
    
    let class_list = class_list.join(" ");
    
    if props.active {
        rsx! {
            li {
                id: props.id,
                class: class_list,
                "aria-current": "page",
                {props.children}
            }
        }
    } else {
        rsx! {
            li {
                id: props.id,
                class: class_list,
                match props.link_to {
                    Some(to) => rsx! {
                        Link {
                            to: to,
                            {props.children}
                        }
                    },
                    None => rsx! {
                        a {
                            href: props.href.unwrap_or("#".to_string()),
                            {props.children}
                        }
                    }
                }
            }
        }
    }
}