smart-house-web: leptos эсперименты

2026-05-23 14:10:41 +03:00
parent 4a84a54591
commit fe9d15f3eb
2 changed files with 68 additions and 4 deletions
--- a/smart-house-web/frontend/index.html
+++ b/smart-house-web/frontend/index.html
@@ -1,5 +1,11 @@
 <!doctype html>
 <html>
-    <head></head>
+    <head>
+        <style>
+            .red {
+                color: red;
+            }
+        </style>
+    </head>
    <body></body>
 </html>
--- a/smart-house-web/frontend/src/main.rs
+++ b/smart-house-web/frontend/src/main.rs
@@ -1,6 +1,64 @@
 use leptos::prelude::*;

-fn main() {
-    console_error_panic_hook::set_once();
-    leptos::mount::mount_to_body(|| view! { <p>"Hello, world!"</p> })
+#[allow(non_snake_case)]
+// Composing different components together is how we build
+// user interfaces. Here, we'll define a reusable <ProgressBar/>.
+// You'll see how doc comments can be used to document components
+// and their properties.
+
+/// Shows progress toward a goal.
+#[component]
+fn ProgressBar(
+    // Marks this as an optional prop. It will default to the default
+    // value of its type, i.e., 0.
+    #[prop(default = 100)]
+    /// The maximum value of the progress bar.
+    max: u16,
+    // Will run `.into()` on the value passed into the prop.
+    #[prop(into)]
+    // `Signal<T>` is a wrapper for several reactive types.
+    // It can be helpful in component APIs like this, where we
+    // might want to take any kind of reactive value
+    /// How much progress should be displayed.
+    progress: Signal<i32>,
+) -> impl IntoView {
+    view! {
+        <progress
+            max={max}
+            value=progress
+        />
+        <br/>
+    }
+}
+
+#[component]
+fn App() -> impl IntoView {
+    let (count, set_count) = signal(0);
+
+    let double_count = move || count.get() * 2;
+
+    view! {
+        <button
+            on:click=move |_| {
+                *set_count.write() += 1;
+            }
+        >
+            "Click me"
+        </button>
+        <br/>
+        // If you have this open in CodeSandbox or an editor with
+        // rust-analyzer support, try hovering over `ProgressBar`,
+        // `max`, or `progress` to see the docs we defined above
+        <ProgressBar max=50 progress=count/>
+        // Let's use the default max value on this one
+        // the default is 100, so it should move half as fast
+        <ProgressBar progress=count/>
+        // Signal::derive creates a Signal wrapper from our derived signal
+        // using double_count means it should move twice as fast
+        <ProgressBar max=50 progress=Signal::derive(double_count)/>
+    }
+}
+
+fn main() {
+    leptos::mount::mount_to_body(App)
 }