dioxus_bootstrap_css/
alert.rs

1use dioxus::prelude::*;
2
3use crate::types::Color;
4
5/// Bootstrap Alert component.
6///
7/// ```rust
8/// rsx! {
9///     Alert { color: Color::Success, "Operation completed!" }
10///     Alert { color: Color::Danger, dismissible: true, "Something went wrong." }
11/// }
12/// ```
13#[derive(Clone, PartialEq, Props)]
14pub struct AlertProps {
15    /// Alert color variant.
16    #[props(default = Color::Primary)]
17    pub color: Color,
18    /// Show a dismiss button. When clicked, the alert hides itself.
19    #[props(default)]
20    pub dismissible: bool,
21    /// Additional CSS classes.
22    #[props(default)]
23    pub class: String,
24    /// Child elements.
25    pub children: Element,
26}
27
28#[component]
29pub fn Alert(props: AlertProps) -> Element {
30    let mut visible = use_signal(|| true);
31
32    if !*visible.read() {
33        return rsx! {};
34    }
35
36    let dismiss_class = if props.dismissible {
37        " alert-dismissible fade show"
38    } else {
39        ""
40    };
41
42    let full_class = if props.class.is_empty() {
43        format!("alert alert-{}{dismiss_class}", props.color)
44    } else {
45        format!("alert alert-{}{dismiss_class} {}", props.color, props.class)
46    };
47
48    rsx! {
49        div {
50            class: "{full_class}",
51            role: "alert",
52            {props.children}
53            if props.dismissible {
54                button {
55                    class: "btn-close",
56                    r#type: "button",
57                    "aria-label": "Close",
58                    onclick: move |_| visible.set(false),
59                }
60            }
61        }
62    }
63}
dioxus_bootstrap_css/alert.rs

dioxus_bootstrap_css/
alert.rs
