Update examples, add css

examples/control_focus.rs

@@ -1,3 +1,8 @@
+//! Managing focus
+//!
+//! This example shows how to manage focus in a Dioxus application. We implement a "roulette" that focuses on each input
+//! in the grid every few milliseconds until the user interacts with the inputs.
+
 use std::rc::Rc;
 
 use dioxus::prelude::*;
@@ -7,6 +12,7 @@ fn main() {
 }
 
 fn app() -> Element {
+    // Element data is stored as Rc<MountedData> so we can clone it and pass it around
     let mut elements = use_signal(Vec::<Rc<MountedData>>::new);
     let mut running = use_signal(|| true);
 
@@ -14,7 +20,7 @@ fn app() -> Element {
         let mut focused = 0;
 
         loop {
-            tokio::time::sleep(std::time::Duration::from_millis(10)).await;
+            tokio::time::sleep(std::time::Duration::from_millis(50)).await;
 
             if !running() {
                 continue;
@@ -31,17 +37,24 @@ fn app() -> Element {
     });
 
     rsx! {
-        div {
-            h1 { "Input Roulette" }
+        style { {include_str!("./assets/roulette.css")} }
+        h1 { "Input Roulette" }
+        button { onclick: move |_| running.toggle(), "Toggle roulette" }
+        div { id: "roulette-grid",
+            // Restart the roulette if the user presses escape
+            onkeydown: move |event| {
+                if event.code().to_string() == "Escape" {
+                    running.set(true);
+                }
+            },
+
+            // Draw the grid of inputs
             for i in 0..100 {
                 input {
+                    r#type: "number",
                     value: "{i}",
-                    onmounted: move |cx| {
-                        elements.write().push(cx.data());
-                    },
-                    oninput: move |_| {
-                        running.set(false);
-                    }
+                    onmounted: move |cx| elements.write().push(cx.data()),
+                    oninput: move |_| running.set(false),
                 }
             }
         }