overflow_clip_margin/
overflow_clip_margin.rs

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

overflow_clip_margin/
overflow_clip_margin.rs
