Experiment with reactivity

main
Elnu 1 year ago
parent 81d2626a35
commit 5bdd3f6556

@ -1,24 +1,43 @@
mod render;
pub mod svg;
use sycamore::prelude::*;
use svg::{SVGUnit, SVGMeasure};
use sycamore::{prelude::*, view::ToView, builder::t};
#[component]
fn Slider<G: Html>(cx: Scope) -> View<G> {
let value = create_signal(cx, 0.0);
#[derive(Clone, Copy, PartialEq, Eq, Default)]
struct Color {
red: u8,
green: u8,
blue: u8,
}
impl<G: Html> ToView<G> for SVGUnit {
fn to_view(&self) -> View<G> {
t(self.to_string())
}
}
#[component(inline_props)]
fn Slider<'a, G: Html>(cx: Scope<'a>, value: &'a Signal<f64>, unit: Option<SVGUnit>) -> View<G> {
view! { cx,
(value.get())
input(type="range", bind:valueAsNumber=value)
div(class="f-row align-items:center") {
span { (value.get())(unit) }
input(type="range", bind:valueAsNumber=value)
}
}
}
fn main() {
sycamore::render_to(
|cx| {
let x = create_signal(cx, 0.0);
let y = create_signal(cx, 0.0);
let z = create_signal(cx, 0.0);
view! { cx,
Slider
Slider
Slider
"Total: "(*x.get() + *y.get() + *z.get())
Slider(value=x, unit=SVGUnit::Inch)
Slider(value=y)
Slider(value=z)
}
},
{

Loading…
Cancel
Save