bevy_immediate 0.8.0

A simple, fast, and modular immediate mode UI library for Bevy
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
102
103
104
105
106
107
108
109
110

use bevy::input_focus::tab_navigation::TabGroup;
use bevy::ui::Node;
use bevy::{ecs::system::ResMut, ui::JustifyContent};
use bevy_immediate::{BevyImmediatePlugin, ImmCtx, ui::CapsUi};

use crate::{
    anchored::AnchoredUiExampleRoot,
    bevy_scrollarea::BevyScrollareaExampleRoot,
    bevy_widgets::BevyWidgetExampleRoot,
    extension_use::ExtensionUseExampleRoot,
    feathers_gallery::FeathersGalleryExampleRoot,
    floating_window::FloatingWindowRoot,
    hello_world::HelloWorldRoot,
    hot_patching::HotPatchingRoot,
    main_menu::{CurrentExample, MenuUiRoot},
    power_user::PowerUserExampleRoot,
    styles,
    text_edit::TextEditExampleRoot,
    tooltip::TooltipExampleRoot,
    widget_use::WidgetUseExampleRoot,
};

/// Example showcases how to create
/// UI that is not attached to anything
pub struct PlainUiExamplePlugin;

impl bevy::app::Plugin for PlainUiExamplePlugin {
    fn build(&self, app: &mut bevy::app::App) {
        // Initialize plugin (it can be initialized multiple times)
        app.add_plugins(BevyImmediatePlugin::<CapsUi>::new());

        // Build your UI as a simple system
        app.add_systems(bevy::app::Update, ui_system);
    }
}

fn ui_system(ctx: ImmCtx<CapsUi>, example: ResMut<CurrentExample>) {
    // It is possible to access world data that is not
    // used by immediate mode.

    // Build your ui, provide unique id
    ctx.build_immediate_root("unique_id")
        .ch()
        .on_spawn_insert(|| {
            (
                Node {
                    flex_direction: bevy::ui::FlexDirection::Row,
                    column_gap: bevy::ui::Val::Px(10.),
                    justify_content: JustifyContent::Stretch,
                    ..styles::fill_parent_node()
                },
                TabGroup::new(0),
            )
        })
        .add(|ui| {
            // Menu container
            ui.ch_id("menu")
                .on_spawn_insert(styles::container_with_background)
                .on_spawn_insert(|| MenuUiRoot);

            // Content container
            let content = ui
                .ch_id(*example) // Changing id creates a new entity
                .on_spawn_insert(|| {
                    let mut bundle = styles::container_with_background();
                    bundle.node.flex_grow = 1.; // Fill remaining space
                    bundle
                });

            match *example {
                CurrentExample::WidgetUse => {
                    // We insert UI widget as an entity with UI widget root component
                    content.on_spawn_insert(|| WidgetUseExampleRoot);
                }
                CurrentExample::HelloWorld => {
                    content.on_spawn_insert(|| HelloWorldRoot);
                }
                CurrentExample::ExtensionUse => {
                    content.on_spawn_insert(|| ExtensionUseExampleRoot);
                }
                CurrentExample::PowerUser => {
                    content.on_spawn_insert(|| PowerUserExampleRoot);
                }
                CurrentExample::BevyWidgets => {
                    content.on_spawn_insert(|| BevyWidgetExampleRoot);
                }
                CurrentExample::BevyScrollbar => {
                    content.on_spawn_insert(|| BevyScrollareaExampleRoot);
                }
                CurrentExample::HotPatching => {
                    content.on_spawn_insert(|| HotPatchingRoot);
                }
                CurrentExample::Tooltip => {
                    content.on_spawn_insert(|| TooltipExampleRoot);
                }
                CurrentExample::FloatingWindows => {
                    content.on_spawn_insert(|| FloatingWindowRoot);
                }
                CurrentExample::Anchored => {
                    content.on_spawn_insert(|| AnchoredUiExampleRoot);
                }
                CurrentExample::TextEdit => {
                    content.on_spawn_insert(|| TextEditExampleRoot);
                }
                CurrentExample::FeathersGallery => {
                    content.on_spawn_insert(|| FeathersGalleryExampleRoot);
                }
            }
        });
}