docs/bevy/examples/ui/layout/fixed_node.rs 1.4 K · 49 lines · raw · history

1 //! Demonstrates how to use `FixedNode` to lay out a UI node as a root node
2
3 use bevy::color::palettes::css::BLUE;
4 use bevy::color::palettes::css::RED;
5 use bevy::color::palettes::css::YELLOW;
6 use bevy::prelude::*;
7
8 fn main() {
9 App::new()
10 .add_plugins(DefaultPlugins)
11 .add_systems(Startup, setup)
12 .run();
13 }
14
15 fn setup(mut commands: Commands) {
16 commands.spawn(Camera2d);
17
18 commands
19 .spawn((
20 Node {
21 width: percent(100),
22 height: percent(100),
23 align_items: AlignItems::Center,
24 justify_content: JustifyContent::Center,
25 ..default()
26 },
27 BackgroundColor(BLUE.into()),
28 Pickable::IGNORE,
29 children![(
30 FixedNode,
31 Node {
32 width: px(100),
33 height: px(100),
34 ..default()
35 },
36 BackgroundColor(YELLOW.into()),
37 )],
38 ))
39 .observe(
40 |over: On<PointerOver>, mut colors: Query<&mut BackgroundColor>| {
41 colors.get_mut(over.entity).unwrap().0 = RED.into();
42 },
43 )
44 .observe(
45 |over: On<PointerLeave>, mut colors: Query<&mut BackgroundColor>| {
46 colors.get_mut(over.entity).unwrap().0 = BLUE.into();
47 },
48 );
49 }