diff --git a/examples/ui/ui.rs b/examples/ui/ui.rs index d338446f91..b43b6efc8d 100644 --- a/examples/ui/ui.rs +++ b/examples/ui/ui.rs @@ -270,19 +270,37 @@ fn setup(mut commands: Commands, asset_server: Res) { }) .with_children(|parent| { // bevy logo (image) - + // A `NodeBundle` is used to display the logo the image as an `ImageBundle` can't automatically + // size itself with a child node present. parent - .spawn(ImageBundle { - style: Style { - width: Val::Px(500.0), + .spawn(( + NodeBundle { + style: Style { + width: Val::Px(500.0), + height: Val::Px(125.0), + margin: UiRect::top(Val::VMin(5.)), + ..default() + }, + // a `NodeBundle` is transparent by default, so to see the image we have to its color to `WHITE` + background_color: Color::WHITE.into(), ..default() }, - ..default() - }) + UiImage::new(asset_server.load("branding/bevy_logo_dark_big.png")), + )) .with_children(|parent| { // alt text - parent - .spawn(TextBundle::from_section("Bevy logo", TextStyle::default())); + // This UI node takes up no space in the layout and the `Text` component is used by the accessiblity module + // and is not rendered. + parent.spawn(( + NodeBundle { + style: Style { + display: Display::None, + ..Default::default() + }, + ..Default::default() + }, + Text::from_section("Bevy logo", TextStyle::default()), + )); }); }); });