docs/bevy/examples/ui/scroll_and_overflow/overflow.rs 4 K · 107 lines · raw · history

1 //! Simple example demonstrating overflow behavior.
2
3 use bevy::{color::palettes::css::*, picking::hover::Hovered, prelude::*};
4
5 fn main() {
6 App::new()
7 .add_plugins(DefaultPlugins)
8 .add_systems(Startup, setup)
9 .add_systems(Update, update_outlines)
10 .run();
11 }
12
13 fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
14 commands.spawn(Camera2d);
15
16 let text_style = TextFont::default();
17
18 let image = asset_server.load("branding/icon.png");
19
20 commands
21 .spawn((
22 Node {
23 width: percent(100),
24 height: percent(100),
25 align_items: AlignItems::Center,
26 justify_content: JustifyContent::Center,
27 ..Default::default()
28 },
29 BackgroundColor(ANTIQUE_WHITE.into()),
30 ))
31 .with_children(|parent| {
32 for overflow in [
33 Overflow::visible(),
34 Overflow::clip_x(),
35 Overflow::clip_y(),
36 Overflow::clip(),
37 ] {
38 parent
39 .spawn(Node {
40 flex_direction: FlexDirection::Column,
41 align_items: AlignItems::Center,
42 margin: UiRect::horizontal(px(25)),
43 ..Default::default()
44 })
45 .with_children(|parent| {
46 let label = format!("{overflow:#?}");
47 parent
48 .spawn((
49 Node {
50 padding: UiRect::all(px(10)),
51 margin: UiRect::bottom(px(25)),
52 ..Default::default()
53 },
54 BackgroundColor(Color::srgb(0.25, 0.25, 0.25)),
55 ))
56 .with_children(|parent| {
57 parent.spawn((Text::new(label), text_style.clone()));
58 });
59 parent
60 .spawn((
61 Node {
62 width: px(100),
63 height: px(100),
64 padding: UiRect {
65 left: px(25),
66 top: px(25),
67 ..Default::default()
68 },
69 border: UiRect::all(px(5)),
70 overflow,
71 ..default()
72 },
73 BorderColor::all(Color::BLACK),
74 BackgroundColor(GRAY.into()),
75 ))
76 .with_children(|parent| {
77 parent.spawn((
78 ImageNode::new(image.clone()),
79 Node {
80 min_width: px(100),
81 min_height: px(100),
82 ..default()
83 },
84 Hovered::default(),
85 Outline {
86 width: px(2),
87 offset: px(2),
88 color: Color::NONE,
89 },
90 ));
91 });
92 });
93 }
94 });
95 }
96
97 fn update_outlines(mut outlines_query: Query<(&mut Outline, Ref<Hovered>)>) {
98 for (mut outline, hovered) in outlines_query.iter_mut() {
99 if hovered.is_changed() {
100 outline.color = if hovered.get() {
101 RED.into()
102 } else {
103 Color::NONE
104 };
105 }
106 }
107 }