dioxus_material/
dialog.rs

1use crate::use_theme;
2use dioxus::prelude::*;
3
4/// Dialogs provide important prompts in a user flow.
5///
6/// [material.io](https://m3.material.io/components/dialogs)
7///
8/// ```
9/// use dioxus::prelude::*;
10/// use dioxus_material::{Dialog, Theme};
11///
12/// fn app() -> Element {
13///     rsx!(
14///         Theme {
15///             Dialog { is_visible: true, h1 { "Dialog" } }
16///         }
17///     )
18/// }
19/// ```
20#[component]
21pub fn Dialog(children: Element, is_visible: bool) -> Element {
22    let theme = use_theme();
23
24    rsx!(
25        div {
26            display: if is_visible { "block" } else { "none" },
27            position: "fixed",
28            top: 0,
29            left: 0,
30            width: "100vw",
31            height: "100vh",
32            background: "rgba(0, 0, 0, 0.4)",
33            div {
34                position: "absolute",
35                top: "50%",
36                left: "50%",
37                transform: "translate(-50%, -50%)",
38                border_radius: "{theme.border_radius_medium}",
39                background: "#fff",
40                {children}
41            }
42        }
43    )
44}