overflow/
overflow.rs

1//! Simple example demonstrating overflow behavior.
2
3use bevy::{color::palettes::css::*, prelude::*};
4
5fn main() {
6    App::new()
7        .add_plugins(DefaultPlugins)
8        .add_systems(Startup, setup)
9        .add_systems(Update, update_outlines)
10        .run();
11}
12
13fn 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                                    Interaction::default(),
85                                    Outline {
86                                        width: px(2),
87                                        offset: px(2),
88                                        color: Color::NONE,
89                                    },
90                                ));
91                            });
92                    });
93            }
94        });
95}
96
97fn update_outlines(mut outlines_query: Query<(&mut Outline, Ref<Interaction>)>) {
98    for (mut outline, interaction) in outlines_query.iter_mut() {
99        if interaction.is_changed() {
100            outline.color = match *interaction {
101                Interaction::Pressed => RED.into(),
102                Interaction::Hovered => WHITE.into(),
103                Interaction::None => Color::NONE,
104            };
105        }
106    }
107}
overflow/overflow.rs

overflow/
overflow.rs
