Create Dialog component

examples/dialog.rs

@@ -0,0 +1,16 @@
+use dioxus::prelude::*;
+use dioxus_material::{Dialog, Theme};
+
+fn app(cx: Scope) -> Element {
+    render!(
+        Theme { 
+            Dialog { is_visible: true, h1 { "Dialog" } }
+        }
+    )
+}
+
+fn main() {
+    dioxus_logger::init(log::LevelFilter::Info).expect("failed to init logger");
+
+    dioxus_web::launch(app)
+}

src/dialog.rs

@@ -0,0 +1,28 @@
+use crate::use_theme;
+use dioxus::prelude::*;
+
+#[component]
+pub fn Dialog<'a>(cx: Scope<'a>, children: Element<'a>, is_visible: bool) -> Element<'a> {
+    let theme = use_theme(cx);
+
+    render!(
+        div {
+            display: if *is_visible { "block" } else { "none" },
+            position: "fixed",
+            top: 0,
+            left: 0,
+            width: "100vw",
+            height: "100vh",
+            background: "rgba(0, 0, 0, 0.4)",
+            div {
+                position: "absolute",
+                top: "50%",
+                left: "50%",
+                transform: "translate(-50%, -50%)",
+                border_radius: "{theme.border_radius}",
+                background: "#fff",
+                children
+            }
+        }
+    )
+}

src/lib.rs

@@ -1,6 +1,9 @@
 mod button;
 pub use button::{Button, ButtonProps, TextButton, TextButtonProps};
 
+mod dialog;
+pub use dialog::Dialog;
+
 mod icon;
 pub use icon::{IconFont, Icon};