overflow_clip_margin/
overflow_clip_margin.rs

1//! Simple example demonstrating the `OverflowClipMargin` style property.
2
3use bevy::{color::palettes::css::*, prelude::*, winit::WinitSettings};
4
5fn main() {
6    App::new()
7        .add_plugins(DefaultPlugins)
8        // Only run the app when there is user input. This will significantly reduce CPU/GPU use.
9        .insert_resource(WinitSettings::desktop_app())
10        .add_systems(Startup, setup)
11        .run();
12}
13
14fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
15    commands.spawn(Camera2d);
16
17    let image = asset_server.load("branding/icon.png");
18
19    commands
20        .spawn((
21            Node {
22                width: Val::Percent(100.),
23                height: Val::Percent(100.),
24                align_items: AlignItems::Center,
25                justify_content: JustifyContent::Center,
26                row_gap: Val::Px(40.),
27                flex_direction: FlexDirection::Column,
28                ..default()
29            },
30            BackgroundColor(ANTIQUE_WHITE.into()),
31        ))
32        .with_children(|parent| {
33            for overflow_clip_margin in [
34                OverflowClipMargin::border_box().with_margin(25.),
35                OverflowClipMargin::border_box(),
36                OverflowClipMargin::padding_box(),
37                OverflowClipMargin::content_box(),
38            ] {
39                parent
40                    .spawn(Node {
41                        flex_direction: FlexDirection::Row,
42                        column_gap: Val::Px(20.),
43                        ..default()
44                    })
45                    .with_children(|parent| {
46                        parent
47                            .spawn((
48                                Node {
49                                    padding: UiRect::all(Val::Px(10.)),
50                                    margin: UiRect::bottom(Val::Px(25.)),
51                                    ..default()
52                                },
53                                BackgroundColor(Color::srgb(0.25, 0.25, 0.25)),
54                            ))
55                            .with_child(Text(format!("{overflow_clip_margin:#?}")));
56
57                        parent
58                            .spawn((
59                                Node {
60                                    margin: UiRect::top(Val::Px(10.)),
61                                    width: Val::Px(100.),
62                                    height: Val::Px(100.),
63                                    padding: UiRect::all(Val::Px(20.)),
64                                    border: UiRect::all(Val::Px(5.)),
65                                    overflow: Overflow::clip(),
66                                    overflow_clip_margin,
67                                    ..default()
68                                },
69                                BackgroundColor(GRAY.into()),
70                                BorderColor(Color::BLACK),
71                            ))
72                            .with_children(|parent| {
73                                parent
74                                    .spawn((
75                                        Node {
76                                            min_width: Val::Px(50.),
77                                            min_height: Val::Px(50.),
78                                            ..default()
79                                        },
80                                        BackgroundColor(LIGHT_CYAN.into()),
81                                    ))
82                                    .with_child((
83                                        ImageNode::new(image.clone()),
84                                        Node {
85                                            min_width: Val::Px(100.),
86                                            min_height: Val::Px(100.),
87                                            ..default()
88                                        },
89                                    ));
90                            });
91                    });
92            }
93        });
94}
overflow_clip_margin/overflow_clip_margin.rs

overflow_clip_margin/
overflow_clip_margin.rs
