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
use dioxus::prelude::*;
/// Modal/dialog container component.
#[component]
pub fn Modal(
children: Element,
title: Option<String>,
on_close: EventHandler<()>,
#[props(default = false)] wide: bool,
) -> Element {
let dialog_class = if wide {
"modal__dialog modal__dialog--wide"
} else {
"modal__dialog"
};
rsx! {
div {
class: "modal",
div {
class: "modal__backdrop",
onclick: move |_| on_close.call(()),
}
div {
class: "{dialog_class}",
if let Some(ref t) = title {
div {
class: "modal__header",
h3 { class: "modal__title", "{t}" }
button {
class: "modal__close",
onclick: move |_| on_close.call(()),
"✕"
}
}
}
div {
class: "modal__body",
{children}
}
}
}
}
}