docs/bevy/examples/ui/layout/z_index.rs 4.6 K · 120 lines · raw · history

1 //! Demonstrates how to use the z-index component on UI nodes to control their relative depth
2 //!
3 //! It uses colored boxes with different z-index values to demonstrate how it can affect the order of
4 //! depth of nodes compared to their siblings, but also compared to the entire UI.
5
6 use bevy::{
7 color::palettes::basic::{BLUE, GRAY, LIME, PURPLE, RED, YELLOW},
8 prelude::*,
9 };
10
11 fn main() {
12 App::new()
13 .insert_resource(ClearColor(Color::BLACK))
14 .add_plugins(DefaultPlugins)
15 .add_systems(Startup, setup)
16 .run();
17 }
18
19 fn setup(mut commands: Commands) {
20 commands.spawn(Camera2d);
21
22 // spawn the container with default z-index.
23 // the default z-index value is `ZIndex(0)`.
24 // because this is a root UI node, using local or global values will do the same thing.
25 commands
26 .spawn(Node {
27 width: percent(100),
28 height: percent(100),
29 align_items: AlignItems::Center,
30 justify_content: JustifyContent::Center,
31 ..default()
32 })
33 .with_children(|parent| {
34 parent
35 .spawn((
36 Node {
37 width: px(180),
38 height: px(100),
39 ..default()
40 },
41 BackgroundColor(GRAY.into()),
42 ))
43 .with_children(|parent| {
44 // spawn a node with default z-index.
45 parent.spawn((
46 Node {
47 position_type: PositionType::Absolute,
48 left: px(10),
49 bottom: px(40),
50 width: px(100),
51 height: px(50),
52 ..default()
53 },
54 BackgroundColor(RED.into()),
55 ));
56
57 // spawn a node with a positive local z-index of 2.
58 // it will show above other nodes in the gray container.
59 parent.spawn((
60 Node {
61 position_type: PositionType::Absolute,
62 left: px(45),
63 bottom: px(30),
64 width: px(100),
65 height: px(50),
66 ..default()
67 },
68 ZIndex(2),
69 BackgroundColor(BLUE.into()),
70 ));
71
72 // spawn a node with a negative local z-index.
73 // it will show under other nodes in the gray container.
74 parent.spawn((
75 Node {
76 position_type: PositionType::Absolute,
77 left: px(70),
78 bottom: px(20),
79 width: px(100),
80 height: px(75),
81 ..default()
82 },
83 ZIndex(-1),
84 BackgroundColor(LIME.into()),
85 ));
86
87 // spawn a node with a positive global z-index of 1.
88 // it will show above all other nodes, because it's the highest global z-index in this example.
89 // by default, boxes all share the global z-index of 0 that the gray container is added to.
90 parent.spawn((
91 Node {
92 position_type: PositionType::Absolute,
93 left: px(15),
94 bottom: px(10),
95 width: px(100),
96 height: px(60),
97 ..default()
98 },
99 BackgroundColor(PURPLE.into()),
100 GlobalZIndex(1),
101 ));
102
103 // spawn a node with a negative global z-index of -1.
104 // this will show under all other nodes including its parent, because it's the lowest global z-index
105 // in this example.
106 parent.spawn((
107 Node {
108 position_type: PositionType::Absolute,
109 left: px(-15),
110 bottom: px(-15),
111 width: px(100),
112 height: px(125),
113 ..default()
114 },
115 BackgroundColor(YELLOW.into()),
116 GlobalZIndex(-1),
117 ));
118 });
119 });
120 }