more tutorial abstractions
This commit is contained in:
@@ -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>
|
||||||
|
|
||||||
|
|||||||
33
src/main.rs
33
src/main.rs
@@ -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)
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user