more tutorial abstractions

This commit is contained in:
Greg Shuflin
2025-11-28 12:43:32 -08:00
parent c8bc34db77
commit 50dd87f290
2 changed files with 39 additions and 2 deletions

View File

@@ -1,6 +1,12 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head></head> <head>
<style>
.red {
color: red;
}
</style>
</head>
<body></body> <body></body>
</html> </html>

View File

@@ -1,6 +1,37 @@
use leptos::prelude::*; use leptos::prelude::*;
#[component]
fn ProgressBar(
#[prop(default = 100)]
max: u16,
progress: ReadSignal<u16>) -> impl IntoView {
view! {
<progress max=max value=progress />
}
}
#[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; }
class:red=move || count.get() % 2 == 1
>
"Click: "
{count}
</button>
<p>
{double_count}
</p>
<ProgressBar max=55 progress=count />
}
}
fn main() { fn main() {
console_error_panic_hook::set_once(); console_error_panic_hook::set_once();
leptos::mount::mount_to_body(|| view! { <p>"Hello, world!"</p> }) leptos::mount::mount_to_body(App)
} }