makara 0.2.8

A Bevy UI simplifier that make it easy to build GUI app with bevy engine.
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

use makara::prelude::*;
use bevy::prelude::*;

fn main() {
    App::new()
        .add_plugins(MakaraPlugin::default())
        .add_systems(Startup, setup)
        .run();
}

fn setup(mut commands: Commands) {
    commands.spawn(
        root_!(
            background_color: Color::srgb(1.0, 0.5, 0.5),
            align_items: AlignItems::Center,
            justify_content: JustifyContent::Center;

            [
                button_!("Show center modal"; on: |_click: On<Clicked>, mut modal_q: ModalQuery| {
                    if let Some(mut modal) = modal_q.find_by_id("center-modal") {
                        modal.show();
                    }
                }),
                button_!(
                    "Show bottom right modal & without animation";

                    on: |_click: On<Clicked>, mut modal_q: ModalQuery| {
                        if let Some(mut modal) = modal_q.find_by_id("bottom-right-modal") {
                            modal.show();
                        }
                    }
                ),
            ]
        )
    );

    // Modal is independent and not part of root hierachy.
    commands.spawn(
        modal_!(id: "center-modal"; [
            column_!(
                padding: px(10),
                align_items: AlignItems::Center,
                justify_content: JustifyContent::Center;

                [
                    text_!("This is modal with center position"),
                    button_!(
                        "Hide modal",
                        margin_top: px(10);

                        on: |_click: On<Clicked>, mut modal_q: ModalQuery| {
                            if let Some(mut modal) = modal_q.find_by_id("center-modal") {
                                modal.hide();
                            }
                        }
                    )
                ]
            )
        ])
    );

    commands.spawn(
        modal_!(
            id: "bottom-right-modal",
            position: ModalPosition::BottomRight,
            scale_animation: false;

            [
                column_!(
                    padding: px(10),
                    align_items: AlignItems::Center,
                    justify_content: JustifyContent::Center;

                    [
                        text_!("This is modal with bottom right position"),
                        button_!("Hide modal"; on: |_click: On<Clicked>, mut modal_q: ModalQuery| {
                            if let Some(mut modal) = modal_q.find_by_id("bottom-right-modal") {
                                modal.hide();
                            }
                        })
                    ]
                )
            ]
        )
    );
}