zirv-ui 0.2.1

Component library 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
81
82
83
84

use yew::{classes, function_component, html, Children, Classes, Html, Properties};

#[derive(Debug, Clone, PartialEq, Default)]
pub enum FlexDirection {
    #[default]
    Vertical,
    Horizontal,
}

impl From<&FlexDirection> for Classes {
    fn from(direction: &FlexDirection) -> Self {
        match direction {
            FlexDirection::Horizontal => classes!("flex-direction-horizontal"),
            FlexDirection::Vertical => classes!("flex-direction-vertical"),
        }
    }
}

#[derive(Debug, Clone, PartialEq, Default)]
pub enum FlexAlign {
    #[default] 
    Center,
    Start,
    End,
    Baseline,
    Stretch,
}

impl From<&FlexAlign> for Classes {
    fn from(align: &FlexAlign) -> Self {
        match align {
            FlexAlign::Center => classes!("flex-align-center"),
            FlexAlign::Start => classes!("flex-align-start"),
            FlexAlign::End => classes!("flex-align-end"),
            FlexAlign::Baseline => classes!("flex-align-baseline"),
            FlexAlign::Stretch => classes!("flex-align-stretch"),
        }
    }
}

#[derive(Debug, Clone, PartialEq, Default)]
pub enum FlexJustify {
    #[default] 
    Center,
    SpaceBetween,
    SpaceAround,
    SpaceEvenly,
    Start,
    End,
}

impl From<&FlexJustify> for Classes {
    fn from(justify: &FlexJustify) -> Self {
        match justify {
            FlexJustify::Center => classes!("flex-justify-center"),
            FlexJustify::SpaceBetween => classes!("flex-justify-space-between"),
            FlexJustify::SpaceAround => classes!("flex-justify-space-around"),
            FlexJustify::SpaceEvenly => classes!("flex-justify-space-evenly"),
            FlexJustify::Start => classes!("flex-justify-start"),
            FlexJustify::End => classes!("flex-justify-end"),
        }
    }
}

#[derive(Properties, Clone, PartialEq)]
pub struct FlexProps {
    pub children: Children,
    #[prop_or_default]
    pub direction: FlexDirection,
    #[prop_or_default]
    pub align: FlexAlign,
    #[prop_or_default]
    pub justify: FlexJustify,
    pub classes: Option<Classes>,
}

#[function_component(Flex)]
pub fn flex(props: &FlexProps) -> Html {
    html! {
        <div class={classes!("flex", &props.direction, &props.align, &props.justify, Some(props.classes.clone()))}>
            {props.children.clone()}
        </div>
    }
}