yew-scroll-area 0.4.0

Custom scroll area component for yew
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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80

use yew::prelude::*;
use yew_style_in_rs::*;

use crate::Color;

#[derive(PartialEq, Properties)]
pub struct Props {
    #[prop_or_default]
    pub color: Color,
    #[prop_or(4.0)]
    pub width: f64,
    #[prop_or(true)]
    pub round: bool,
}

#[function_component(DefaultVerticalThumb)]
pub fn default_vertical_thumb(props: &Props) -> Html {
    let color = format!(
        "rgba({}, {}, {}, {})",
        props.color.r, props.color.g, props.color.b, props.color.a
    );
    let thumb_width = props.width;
    let thumb_round = if props.round { thumb_width / 2.0 } else { 0.0 };

    style! {
        let css = css! {r#"
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: row;
            justify-content: center;
        "#};
        let dyn_css = dyn css! {r#"
            & > div {
                width: ${thumb_width}px;
                height: 100%;
                background: ${color};
                border-radius: ${thumb_round}px;
            }
        "#};
    }
    html! {
        <div class={classes!(css, dyn_css)}>
            <div></div>
        </div>
    }
}

#[function_component(DefaultHorizontalThumb)]
pub fn default_horizontal_thumb(props: &Props) -> Html {
    let color = format!(
        "rgba({}, {}, {}, {})",
        props.color.r, props.color.g, props.color.b, props.color.a
    );
    let thumb_width = props.width;
    let thumb_round = if props.round { thumb_width / 2.0 } else { 0.0 };

    style! {
        let css = css! {r#"
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
        "#};
        let dyn_css = dyn css! {r#"
            & > div{
                width: 100%;
                height: ${thumb_width}px;
                background: ${color};
                border-radius: ${thumb_round}px;
            }
        "#};
    }
    html! {
        <div class={classes!(css, dyn_css)}>
            <div></div>
        </div>
    }
}