thaw 0.4.8

An easy to use leptos component library
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

use crate::SliderInjection;
use leptos::prelude::*;
use thaw_utils::{class_list, mount_style};

#[component]
pub fn SliderLabel(
    #[prop(optional, into)] class: MaybeProp<String>,
    /// Value at which label will be placed.
    #[prop(into)]
    value: Signal<f64>,
    children: Children,
) -> impl IntoView {
    mount_style("slider-label", include_str!("./slider_label.css"));

    let slider = SliderInjection::expect_context();

    let style = move || {
        let value = (value.get() - slider.min.get()) / (slider.max.get() - slider.min.get());

        if slider.vertical.get() {
            format!("bottom: calc({} * (100% - var(--thaw-slider__thumb--size)) + var(--thaw-slider__thumb--size) / 2)", value)
        } else {
            format!("left: calc({} * (100% - var(--thaw-slider__thumb--size)) + var(--thaw-slider__thumb--size) / 2)", value)
        }
    };

    view! {
        <div
            class=class_list![
                "thaw-slider-label",
            move || format!("thaw-slider-label--{}", if slider.vertical.get() { "vertical" } else { "horizontal" }),
            class
            ]
            style=style
        >

            {children()}
        </div>
    }
}