dioxus_bootstrap_css/
alert.rs

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

dioxus_bootstrap_css/
alert.rs
