makara 0.2.6

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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101

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

// User bevy's resource as app state.
// You can have as many resource as you want!
#[derive(Resource)]
struct User {
    email: String,
    name: String,
    gender: String
}

impl Default for User {
    fn default() -> Self {
        Self {
            email: "unknown".to_string(),
            name: "unknown".to_string(),
            gender: "unknown".to_string(),
        }
    }
}

impl User {
    fn get_info(&self) -> String {
        format!(
            "Email: {}, Name: {}, Gender: {}",
            self.email,
            self.name,
            self.gender
        )
    }
}

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

fn form_container() -> impl Bundle {

    column_!(
        align_items: AlignItems::Center;

        [
            text_input_!(
                "Enter email address",
                width: px(200);

                on: |change: On<Change<String>>, mut user: ResMut<User>, mut txt_q: TextQuery| {
                    if let Some(txt) = txt_q.find_by_id("info-text") {
                        user.email = change.data.clone();
                        txt.text.value.0 = user.get_info();
                    }
                }
            ),

            text_input_!(
                "Enter name",
                margin_top: px(5),
                width: px(200);

                on: |change: On<Change<String>>, mut user: ResMut<User>, mut txt_q: TextQuery| {
                    if let Some(txt) = txt_q.find_by_id("info-text") {
                        user.name = change.data.clone();
                        txt.text.value.0 = user.get_info();
                    }
                }
            ),

            radio_group_!(
                margin_top: px(5);

                on: |change: On<Change<String>>, mut user: ResMut<User>, mut txt_q: TextQuery| {
                    if let Some(txt) = txt_q.find_by_id("info-text") {
                        user.gender = change.data.clone();
                        txt.text.value.0 = user.get_info();
                    }
                };

                [ radio_!("Male"), radio_!("Female") ]
            )
        ]
    )
}

fn setup(mut commands: Commands, user: Res<User>) {
    commands.spawn(
        root_!(
            align_items: AlignItems::Center,
            justify_content: JustifyContent::Center;

            [
                text_!(&user.get_info(), margin_bottom: px(5), id: "info-text"),
                form_container()
            ]
        )
    );
}