mirror of
https://github.com/bevyengine/bevy.git
synced 2026-07-01 00:05:45 -04:00
ickshonpe
f62d53dbca
# Objective Allow borders and padding on text and images. Fixes #17300, #14498, #14789, #11557, #6879 ## Solution Remove filter for border values on content sized nodes. Apply content offsets to content in rendering and picking. ## Testing ``` cargo run --example testbed_ui -- boxedcontent ``` ``` cargo run --example image_node ``` ``` cargo run --example editable_text ``` ``` cargo run --example text_background_colors ``` ## Showcase <img width="1924" height="1127" alt="Screenshot 2026-03-25 113700" src="https://github.com/user-attachments/assets/68be286b-ca0e-46c7-9295-973df77412e9" /> <img width="223" height="223" alt="birdd" src="https://github.com/user-attachments/assets/e9f6e393-7ee9-498b-85d0-318abd702448" />
43 lines
1.2 KiB
Rust
43 lines
1.2 KiB
Rust
//! This example illustrates the basic usage of [`ImageNode`],
|
|
//! a UI node that renders an image.
|
|
|
|
use bevy::prelude::*;
|
|
|
|
fn main() {
|
|
App::new()
|
|
.add_plugins(DefaultPlugins)
|
|
.add_systems(Startup, setup)
|
|
.run();
|
|
}
|
|
|
|
fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
|
|
// Ui camera
|
|
commands.spawn(Camera2d);
|
|
|
|
commands.spawn((
|
|
// This root Node serves as a container for the ImageNode.
|
|
// In this case, it will center the item on the screen.
|
|
Node {
|
|
width: percent(100),
|
|
height: percent(100),
|
|
align_items: AlignItems::Center,
|
|
justify_content: JustifyContent::Center,
|
|
..default()
|
|
},
|
|
// Child Nodes are added with the `children!` macro.
|
|
children![(
|
|
// Create a new `ImageNode` with the given texture.
|
|
ImageNode::new(asset_server.load("branding/icon.png")),
|
|
// Child Node control `ImageNode` size
|
|
Node {
|
|
border: px(5.).all(),
|
|
padding: px(10.).all(),
|
|
width: px(256.),
|
|
height: px(256.),
|
|
..default()
|
|
},
|
|
BorderColor::all(Color::WHITE),
|
|
)],
|
|
));
|
|
}
|