dioxus-bootstrap-css 0.3.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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133

use dioxus::prelude::*;

use crate::types::Color;

/// Bootstrap Progress container.
///
/// # Bootstrap HTML → Dioxus
///
/// ```html
/// <!-- Bootstrap HTML -->
/// <div class="progress">
///   <div class="progress-bar bg-success" style="width: 75%">75%</div>
/// </div>
/// <!-- Stacked bars -->
/// <div class="progress">
///   <div class="progress-bar" style="width: 30%"></div>
///   <div class="progress-bar bg-warning" style="width: 20%"></div>
/// </div>
/// ```
///
/// ```rust,no_run
/// rsx! {
///     Progress {
///         ProgressBar { value: 75.0, color: Color::Success, show_label: true }
///     }
///     // Stacked bars
///     Progress {
///         ProgressBar { value: 30.0, color: Color::Primary }
///         ProgressBar { value: 20.0, color: Color::Warning }
///     }
///     // Striped animated
///     Progress {
///         ProgressBar { value: 50.0, striped: true, animated: true }
///     }
/// }
/// ```
#[derive(Clone, PartialEq, Props)]
pub struct ProgressProps {
    /// Additional CSS classes.
    #[props(default)]
    pub class: String,
    /// Any additional HTML attributes.
    #[props(extends = GlobalAttributes)]
    attributes: Vec<Attribute>,
    /// Child elements (ProgressBar components).
    pub children: Element,
}

#[component]
pub fn Progress(props: ProgressProps) -> Element {
    let full_class = if props.class.is_empty() {
        "progress".to_string()
    } else {
        format!("progress {}", props.class)
    };

    rsx! {
        div { class: "{full_class}", ..props.attributes, {props.children} }
    }
}

/// Bootstrap ProgressBar component (goes inside Progress).
#[derive(Clone, PartialEq, Props)]
pub struct ProgressBarProps {
    /// Progress value (0.0 to 100.0).
    #[props(default)]
    pub value: f64,
    /// Bar color.
    #[props(default)]
    pub color: Option<Color>,
    /// Show striped pattern.
    #[props(default)]
    pub striped: bool,
    /// Animate the stripes.
    #[props(default)]
    pub animated: bool,
    /// Show the value as text inside the bar.
    #[props(default)]
    pub show_label: bool,
    /// Additional CSS classes.
    #[props(default)]
    pub class: String,
    /// Any additional HTML attributes.
    #[props(extends = GlobalAttributes)]
    attributes: Vec<Attribute>,
}

#[component]
pub fn ProgressBar(props: ProgressBarProps) -> Element {
    let color_class = match &props.color {
        Some(c) => format!(" bg-{c}"),
        None => String::new(),
    };
    let striped = if props.striped || props.animated {
        " progress-bar-striped"
    } else {
        ""
    };
    let animated = if props.animated {
        " progress-bar-animated"
    } else {
        ""
    };

    let full_class = if props.class.is_empty() {
        format!("progress-bar{color_class}{striped}{animated}")
    } else {
        format!(
            "progress-bar{color_class}{striped}{animated} {}",
            props.class
        )
    };

    let width = format!("width: {}%", props.value);
    let label = if props.show_label {
        format!("{}%", props.value as u32)
    } else {
        String::new()
    };

    rsx! {
        div {
            class: "{full_class}",
            role: "progressbar",
            style: "{width}",
            "aria-valuenow": "{props.value}",
            "aria-valuemin": "0",
            "aria-valuemax": "100",
            ..props.attributes,
            "{label}"
        }
    }
}