michiu_ui 0.0.2

The michiu library handles layout and rendering.
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
85
86
87
88
89
90
91
92
93

pub use michiu_ui::prelude::*;

pub fn container() -> Element {
    div(ts().flex().grow().p(16.0).items_center().justify_center()).child(
        h_flex(
            ts().w_full()
                .h_auto()
                .max_height(pct(100.0))
                .aspect_ratio(1.618, 1.0),
        )
        .children([
            div(hover_opacity()
                .width(pct(61.8))
                .h_full()
                .bg_color(Color::BLUE)
                .r_left(4.0)),
            step_1().style(ts().width(pct(38.2)).h_full()),
        ]),
    )
}

fn step_1() -> Element {
    v_flex(ts()).children([
        div(hover_opacity()
            .w_full()
            .height(pct(61.8))
            .bg_color(Color::CYAN)
            .r((0.0, 4.0, 0.0, 0.0))),
        step_2().style(ts().w_full().height(pct(38.2))),
    ])
}

fn step_2() -> Element {
    h_flex(ts()).children([
        step_3().style(ts().width(pct(38.2)).h_full()),
        div(hover_opacity()
            .width(pct(61.8))
            .h_full()
            .bg_color(Color::GREEN)
            .r((0.0, 0.0, 4.0, 0.0))),
    ])
}

fn step_3() -> Element {
    v_flex(ts()).children([
        step_4().style(ts().w_full().height(pct(38.2))),
        div(hover_opacity()
            .w_full()
            .height(pct(61.8))
            .bg_color(Color::YELLOW)),
    ])
}

fn step_4() -> Element {
    h_flex(ts()).children([
        div(hover_opacity()
            .width(pct(61.8))
            .h_full()
            .bg_color(Color::PURPLE)),
        step_5().style(ts().width(pct(38.2)).h_full()),
    ])
}

fn step_5() -> Element {
    v_flex(ts()).children([
        div(hover_opacity()
            .w_full()
            .height(pct(61.8))
            .bg_color(Color::ORANGE)),
        step_6().style(ts().w_full().height(pct(38.2))),
    ])
}

fn step_6() -> Element {
    h_flex(ts()).children([
        step_7().style(ts().width(pct(38.2)).h_full()),
        div(hover_opacity()
            .width(pct(61.8))
            .h_full()
            .bg_color(Color::MAGENTA)),
    ])
}

fn step_7() -> Element {
    div(hover_opacity().size_full().bg_color(Color::RED))
}

fn hover_opacity() -> ThisStyle {
    use std::time::Duration;

    ts().hovered(ts().opacity_50())
        .trans_opacity(Duration::from_millis(300), AnimationCurve::EaseInOutQuad)
}