michiu_ui 0.0.3

The michiu library handles layout and rendering.
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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127

use crate::{
    app::theme::Theme,
    components::{label_style, section_title},
};
pub use michiu_ui::prelude::*;

pub fn container() -> Element {
    v_flex(ts().gap(24.0).p(16.0)).children([
        style_container(),
        weight_container(),
        length_container(),
        align_container(),
        color_container(),
    ])
}

fn section_style() -> ThisStyle {
    ts().grow().gap(14.0)
}

fn wrapper_style() -> ThisStyle {
    ts().w_full().gap(14.0)
}

fn base(change: bool) -> ThisStyle {
    let s = ts()
        .p(12.0)
        .r(4.0)
        .size((170.0, 75.0))
        .justify_center()
        .items_center()
        .p(10.0)
        .r(4.0)
        .hovered(ts().bg_color(dynamic(|t: &Theme| t.background_hover)));

    if change {
        s
    } else {
        s.border_color(dynamic(|t: &Theme| t.border))
    }
}

fn style_container() -> Element {
    let solid = flex(base(false).border_solid(2.0)).label("solid", label_style());
    let dashed = flex(base(false).border_dashed(2.0)).label("dashed", label_style());
    let dotted = flex(base(false).border_dotted(2.0)).label("dotted", label_style());
    let double = flex(base(false).border_double(4.0)).label("double", label_style());

    v_flex(section_style()).children([
        section_title("Border Style"),
        h_flex(wrapper_style()).children([solid, dashed, dotted, double]),
    ])
}

fn weight_container() -> Element {
    let one = flex(base(false).border_solid(1.0)).label("1.0 px", label_style());
    let two = flex(base(false).border_solid(2.0)).label("2.0 px", label_style());
    let four = flex(base(false).border_solid(4.0)).label("4.0 px", label_style());
    let eight = flex(base(false).border_solid(8.0)).label("8.0 px", label_style());

    v_flex(section_style()).children([
        section_title("Border Weight"),
        h_flex(wrapper_style()).children([one, two, four, eight]),
    ])
}

fn length_container() -> Element {
    let top_only = flex(base(false)
        .border_solid(2.0)
        .border_lengths((1.0, 0.0, 0.0, 0.0)))
    .label("top only", label_style());

    let half_all =
        flex(base(false).border_solid(2.0).border_lengths(0.5)).label("all 50%", label_style());

    let vertical_only = flex(base(false).border_solid(2.0).border_lengths((1.0, 0.0)))
        .label("vertical", label_style());

    let horizontal_only = flex(base(false).border_solid(2.0).border_lengths((0.0, 1.0)))
        .label("horizontal", label_style());

    v_flex(section_style()).children([
        section_title("Border Lengths"),
        h_flex(wrapper_style()).children([top_only, half_all, vertical_only, horizontal_only]),
    ])
}

fn align_container() -> Element {
    let start = flex(base(false)
        .border_solid(2.0)
        .border_lengths(0.5)
        .border_align(BorderAlignment::Start))
    .label("Start", label_style());

    let center = flex(base(false)
        .border_solid(2.0)
        .border_lengths(0.5)
        .border_align(BorderAlignment::Center))
    .label("Center", label_style());

    let end = flex(base(false)
        .border_solid(2.0)
        .border_lengths(0.5)
        .border_align(BorderAlignment::End))
    .label("End", label_style());

    v_flex(section_style()).children([
        section_title("Border Alignment (50% Length)"),
        h_flex(wrapper_style()).children([start, center, end]),
    ])
}

fn color_container() -> Element {
    let red =
        flex(base(true).border_solid(2.0).border_color(Color::RED)).label("Red", label_style());
    let yellow = flex(base(true).border_solid(2.0).border_color(Color::YELLOW))
        .label("Yellow", label_style());
    let green =
        flex(base(true).border_solid(2.0).border_color(Color::GREEN)).label("Green", label_style());
    let blue =
        flex(base(true).border_solid(2.0).border_color(Color::BLUE)).label("Blue", label_style());

    v_flex(section_style()).children([
        section_title("Border Color"),
        h_flex(wrapper_style()).children([red, yellow, green, blue]),
    ])
}