update the dioxus cratesio readme, add many more examples (#5501)

* update the dioxus cratesio readme

* fix example

* fix header

* add a bunch more examples

examples/03-assets-styling/document_title.rs

@@ -0,0 +1,27 @@
+//! Setting the page title.
+//!
+//! The `Title` component renders a `<title>` tag into the document head. On the web it
+//! sets the browser tab title; on desktop it becomes the window title. Because it's a
+//! regular component, its contents can be driven by signals and update live.
+
+use dioxus::prelude::*;
+
+fn main() {
+    dioxus::launch(app);
+}
+
+fn app() -> Element {
+    let mut unread = use_signal(|| 0);
+
+    rsx! {
+        // The title updates every time the signal changes
+        Title {
+            if unread() > 0 { "({unread}) Inbox" } else { "Inbox" }
+        }
+
+        h1 { "Inbox" }
+        p { "Unread messages: {unread}" }
+        button { onclick: move |_| unread += 1, "New message" }
+        button { onclick: move |_| unread.set(0), "Mark all read" }
+    }
+}

examples/03-assets-styling/dynamic_styles.rs

@@ -0,0 +1,62 @@
+//! Styling driven by state.
+//!
+//! Style attributes are interpolated the same way text is — read from signals inside `"{...}"`
+//! or pass a conditional expression directly. The element re-renders only when the read
+//! signals change, so you can freely animate colors, sizes, and transforms this way.
+
+use dioxus::prelude::*;
+
+fn main() {
+    dioxus::launch(app);
+}
+
+fn app() -> Element {
+    let mut hue = use_signal(|| 200.0_f32);
+    let mut size = use_signal(|| 100.0_f32);
+    let mut rotated = use_signal(|| false);
+
+    rsx! {
+        h1 { "Dynamic styling" }
+
+        div {
+            width: "{size}px",
+            height: "{size}px",
+            background_color: "hsl({hue}, 80%, 60%)",
+            transition: "transform 300ms ease",
+            transform: if rotated() { "rotate(45deg)" } else { "rotate(0deg)" },
+            margin: "20px 0",
+        }
+
+        div {
+            label { "Hue: {hue:.0}" }
+            input {
+                r#type: "range",
+                min: "0",
+                max: "360",
+                value: "{hue}",
+                oninput: move |evt| {
+                    if let Ok(v) = evt.value().parse::<f32>() {
+                        hue.set(v);
+                    }
+                },
+            }
+        }
+
+        div {
+            label { "Size: {size:.0}px" }
+            input {
+                r#type: "range",
+                min: "40",
+                max: "300",
+                value: "{size}",
+                oninput: move |evt| {
+                    if let Ok(v) = evt.value().parse::<f32>() {
+                        size.set(v);
+                    }
+                },
+            }
+        }
+
+        button { onclick: move |_| rotated.toggle(), "Toggle rotation" }
+    }
+}

examples/03-assets-styling/favicon.rs

@@ -0,0 +1,23 @@
+//! Setting a favicon.
+//!
+//! Use `document::Link` with `rel: "icon"` to point the browser at a favicon. Combined with
+//! `asset!`, the favicon is bundled into the app and served with the same path-mangling
+//! and cache-busting as any other asset.
+
+use dioxus::prelude::*;
+
+const FAVICON: Asset = asset!("/examples/assets/logo.png");
+
+fn main() {
+    dioxus::launch(app);
+}
+
+fn app() -> Element {
+    rsx! {
+        // Link is a generic head element — for a favicon set rel="icon"
+        document::Link { rel: "icon", href: FAVICON }
+
+        h1 { "Check the browser tab!" }
+        p { "The favicon is loaded from examples/assets/logo.png." }
+    }
+}

examples/03-assets-styling/fonts.rs

@@ -0,0 +1,44 @@
+//! Loading fonts — from a CDN and bundled with the app.
+//!
+//! Two common ways to get a custom typeface onto the page:
+//!
+//! 1. Point `Stylesheet` at a hosted CSS file like Google Fonts — the browser fetches the
+//!    font files on demand.
+//! 2. Bundle a font file into the app with `asset!`, then declare an `@font-face` rule
+//!    that points at it. This avoids the network round-trip and makes the font available
+//!    offline.
+
+use dioxus::prelude::*;
+
+// A local font, bundled into the app. The asset macro fingerprints and copies the file
+// into the final build; at runtime `INTER` formats to the public URL.
+const INTER: Asset = asset!("/examples/assets/Inter-Regular.woff2");
+
+fn main() {
+    dioxus::launch(app);
+}
+
+fn app() -> Element {
+    rsx! {
+        // Approach 1 — request a stylesheet from the Google Fonts CDN
+        Stylesheet { href: "https://fonts.googleapis.com/css2?family=Lobster&family=Roboto+Mono&display=swap" }
+
+        // Approach 2 — register a bundled font with an inline @font-face rule.
+        // `{INTER}` interpolates to the asset's resolved URL at runtime.
+        style { "@font-face {{ font-family: 'Inter'; src: url('{INTER}') format('woff2'); font-display: swap; }}" }
+
+        h1 { font_family: "'Lobster', cursive", font_size: "48px",
+            "From Google Fonts"
+        }
+        p { font_family: "'Roboto Mono', monospace",
+            "This paragraph also comes from the CDN."
+        }
+
+        hr {}
+
+        h2 { font_family: "'Inter', sans-serif", "Bundled Inter font" }
+        p { font_family: "'Inter', sans-serif",
+            "This paragraph uses Inter, shipped with the app — no network request needed."
+        }
+    }
+}

examples/03-assets-styling/inline_styles.rs

@@ -0,0 +1,44 @@
+//! Inline styles.
+//!
+//! For quick one-off styling, every CSS property is available as an attribute on HTML
+//! elements — use snake_case in Rust (`background_color`) for the kebab-case CSS property
+//! (`background-color`). You can also set the raw `style:` attribute with a full string.
+
+use dioxus::prelude::*;
+
+fn main() {
+    dioxus::launch(app);
+}
+
+fn app() -> Element {
+    rsx! {
+        // Each CSS property is just a named attribute
+        div {
+            background_color: "#1e3a8a",
+            color: "white",
+            padding: "20px",
+            border_radius: "8px",
+            font_family: "system-ui, sans-serif",
+
+            h1 { "Inline styling" }
+            p { "Property names are snake_case here, kebab-case in real CSS." }
+        }
+
+        // The raw `style` attribute accepts any CSS string
+        div {
+            style: "margin-top: 12px; border: 2px dashed tomato; padding: 10px;",
+            "Use `style:` when you want a plain CSS string."
+        }
+
+        // Interpolation works too — great for values driven by Rust expressions
+        for i in 1..=5 {
+            span {
+                display: "inline-block",
+                width: "32px",
+                height: "32px",
+                margin: "4px",
+                background_color: "hsl({i * 60}, 70%, 55%)",
+            }
+        }
+    }
+}

examples/03-assets-styling/meta_elements.rs

@@ -1,20 +0,0 @@
-//! This example shows how to add metadata to the page with the Meta component
-
-use dioxus::prelude::*;
-
-fn main() {
-    dioxus::launch(app);
-}
-
-fn app() -> Element {
-    rsx! {
-        // You can use the Meta component to render a meta tag into the head of the page
-        // Meta tags are useful to provide information about the page to search engines and social media sites
-        // This example sets up meta tags for the open graph protocol for social media previews
-        Meta { property: "og:title", content: "My Site" }
-        Meta { property: "og:type", content: "website" }
-        Meta { property: "og:url", content: "https://www.example.com" }
-        Meta { property: "og:image", content: "https://example.com/image.jpg" }
-        Meta { name: "description", content: "My Site is a site" }
-    }
-}

examples/03-assets-styling/script.rs

@@ -0,0 +1,34 @@
+//! Adding a script to the document head.
+//!
+//! `document::Script` injects a `<script>` tag into the page. Use it to embed an inline
+//! snippet via children, or load an external script by passing a `src`. Scripts are
+//! deduplicated by their `src`, so mounting the same script from multiple components is safe.
+//!
+//! Prefer `Script` over `link {}` for better integration with SSR and pre-rendering.
+
+use dioxus::prelude::*;
+
+fn main() {
+    dioxus::launch(app);
+}
+
+fn app() -> Element {
+    rsx! {
+        // Inline script — children must be a single text node
+        document::Script { "console.log('Hello from an inline script!');" }
+
+        // External script, loaded with `defer` so it runs after parsing
+        document::Script { src: "https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.3/dist/confetti.browser.min.js", defer: true }
+
+        h1 { "Script example" }
+        p { "Open your browser's console to see the inline script's output." }
+
+        button {
+            onclick: move |_| {
+                // Call out to the confetti library loaded above
+                document::eval("confetti && confetti();");
+            },
+            "🎉 Confetti"
+        }
+    }
+}

examples/03-assets-styling/stylesheet.rs

@@ -0,0 +1,24 @@
+//! Linking a CSS stylesheet.
+//!
+//! `Stylesheet` renders a `<link rel="stylesheet">` into the document head. Pairing it with
+//! the `asset!` macro is the most common way to style a Dioxus app: the CSS file is bundled,
+//! fingerprinted for cache-busting, and can be hot-reloaded during development.
+
+use dioxus::prelude::*;
+
+const STYLE: Asset = asset!("/examples/assets/stylesheet.css");
+
+fn main() {
+    dioxus::launch(app);
+}
+
+fn app() -> Element {
+    rsx! {
+        // Placing the Stylesheet anywhere in the tree is fine — it's collected into <head>
+        Stylesheet { href: STYLE }
+
+        h1 { "Styled with a CSS file" }
+        p { "All styling comes from stylesheet.css, loaded via the asset! macro." }
+        button { "A styled button" }
+    }
+}