LAB/rust-otus
0
0
Fork 0
Code Pull Requests Activity

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

Browse Source
This commit is contained in:
Баранов Александр Сергеевич
2026-05-23 14:10:41 +03:00
parent 4a84a54591
commit fe9d15f3eb
2 changed files with 68 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
smart-house-web/frontend/index.html
View File

@@ -1,5 +1,11 @@
<!doctype html> <!doctype html>
<html> <html>
<head></head> <head>
<style>
.red {
color: red;
}
</style>
</head>
<body></body> <body></body>
</html> </html>

64
smart-house-web/frontend/src/main.rs
View File

@@ -1,6 +1,64 @@
use leptos::prelude::*; use leptos::prelude::*;
fn main() { #[allow(non_snake_case)]
console_error_panic_hook::set_once(); // Composing different components together is how we build
leptos::mount::mount_to_body(|| view! { <p>"Hello, world!"</p> }) // 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)
} }