dioxus-modal 0.3.2

Modal composable 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

use crate::MODAL;
use crate::fns::close;
use crate::hooks::use_window_keydown;
use dioxus::prelude::*;

use dioxus_transition::prelude::*;

#[component]
pub fn ModalCollector() -> Element {
    #[cfg(not(feature = "ssr"))]
    use_window_keydown(move |event| {
        if event.key() == "Escape" {
            close();
        }
    });

    rsx! {
        div {
            role: "dialog",
            position: "relative",
            z_index: "2147483647",
            "aria-modal": MODAL().is_some().to_string(),
            "aria-labelledby": "modal-title",

            Transition {
                id: "dioxus_modal-overlay",
                kind: "blur",
                duration: 300,

                if MODAL().is_some() {
                    div {
                        "aria-hidden": "true",
                        id: "dioxus_modal-overlay",
                        position: "fixed",
                        top: "0",
                        right: "0",
                        bottom: "0",
                        left: "0",
                    }
                }
            }

            Transition {
                id: "dioxus_modal-node",
                kind: "modal",
                duration: 300,

                if let Some(children) = MODAL() {
                    div {
                        id: "dioxus_modal-node",
                        position: "fixed",
                        top: "0",
                        right: "0",
                        bottom: "0",
                        left: "0",
                        z_index: "2147483646",
                        width: "100vw",
                        overflow_y: "auto",

                        div {
                            padding: "1rem",
                            text_align: "center",
                            justify_content: "center",
                            align_items: "center",
                            min_height: "100%",
                            display: "flex",

                            {children}
                        }
                    }
                }
            }
        }
    }
}