mirror of
https://github.com/DioxusLabs/dioxus
synced 2024-11-14 00:17:17 +00:00
20d146d9bd
* improve documentation for the fullstack server context * Add a section about axum integration to the crate root docs * make serve_dioxus_application accept the cfg builder directly * remove unused server_fn module * improve fullstack config docs * improve documentation for the server function macro * fix axum router extension link * Fix doc tests * Fix launch builder * Simplify the launch builder * don't re-export launch in the prelude * refactor fullstack launch * Fix fullstack launch builder * Update static generation with the new builder api * fix some formatting/overly broad launch replacements * fix custom menu example * fix fullstack/static generation examples * Fix static generation launch * A few small formatting fixes * Fix a few doc tests * implement LaunchConfig for serve configs * fix fullstack launch with separate web and server launch methods * fix check with all features * dont expose inner core module * clippy and check * fix readme --------- Co-authored-by: Jonathan Kelley <jkelleyrtp@gmail.com>
58 lines
2 KiB
Rust
58 lines
2 KiB
Rust
//! Thanks to @japsu and their project https://github.com/japsu/jatsi for the example!
|
|
//!
|
|
//! This example shows how to create a simple dice rolling app using SVG and Dioxus.
|
|
//! The `svg` element and its children have a custom namespace, and are attached using different methods than regular
|
|
//! HTML elements. Any element can specify a custom namespace by using the `namespace` meta attribute.
|
|
//!
|
|
//! If you `go-to-definition` on the `svg` element, you'll see its custom namespace.
|
|
|
|
use dioxus::prelude::*;
|
|
use rand::{thread_rng, Rng};
|
|
|
|
fn main() {
|
|
dioxus::launch(|| {
|
|
rsx! {
|
|
div { user_select: "none", webkit_user_select: "none", margin_left: "10%", margin_right: "10%",
|
|
h1 { "Click die to generate a new value" }
|
|
div { cursor: "pointer", height: "100%", width: "100%", Dice {} }
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
#[component]
|
|
fn Dice() -> Element {
|
|
const Y: bool = true;
|
|
const N: bool = false;
|
|
const DOTS: [(i64, i64); 7] = [(-1, -1), (-1, -0), (-1, 1), (1, -1), (1, 0), (1, 1), (0, 0)];
|
|
const DOTS_FOR_VALUE: [[bool; 7]; 6] = [
|
|
[N, N, N, N, N, N, Y],
|
|
[N, N, Y, Y, N, N, N],
|
|
[N, N, Y, Y, N, N, Y],
|
|
[Y, N, Y, Y, N, Y, N],
|
|
[Y, N, Y, Y, N, Y, Y],
|
|
[Y, Y, Y, Y, Y, Y, N],
|
|
];
|
|
|
|
let mut value = use_signal(|| 5);
|
|
let active_dots = use_memo(move || &DOTS_FOR_VALUE[(value() - 1) as usize]);
|
|
|
|
rsx! {
|
|
svg {
|
|
view_box: "-1000 -1000 2000 2000",
|
|
onclick: move |event| {
|
|
event.prevent_default();
|
|
value.set(thread_rng().gen_range(1..=6))
|
|
},
|
|
rect { x: -1000, y: -1000, width: 2000, height: 2000, rx: 200, fill: "#aaa" }
|
|
for ((x, y), _) in DOTS.iter().zip(active_dots.read().iter()).filter(|(_, &active)| active) {
|
|
circle {
|
|
cx: *x * 600,
|
|
cy: *y * 600,
|
|
r: 200,
|
|
fill: "#333"
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|