yew-style 0.1.4

Style for Yew components.
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

use yew::prelude::*;
use yew_style::Style;

#[derive(PartialEq, Properties)]
struct ButtonProps {
    #[prop_or_default]
    pub class: Classes,
    #[prop_or_default]
    pub id: Option<AttrValue>,
    #[prop_or_default]
    pub style: Style,

    #[prop_or_default]
    pub children: Html,
}

#[function_component]
fn Button(props: &ButtonProps) -> Html {
    html! {
        <button
            class={props.class.clone()}
            id={props.id.clone()}
            style={props.style
                .clone()
                .with_defaults([
                    ("padding", "0.5rem")
                ])
                .to_string()
            }
        >
            {props.children.clone()}
        </button>
    }
}

#[function_component]
fn App() -> Html {
    html! {
        <Button
            id="button"
            style={[
                ("color", "white"),
                ("background-color",  "gray"),
                ("border", "1px solid black")
            ]}
        >
            {"Click me"}
        </Button>
    }
}