Outline

Outline

• width : bevy_ui::geometry::Val
• offset : bevy_ui::geometry::Val
• color : bevy_color::color::Color

Description

The [Outline] component adds an outline outside the edge of a UI node. Outlines do not take up space in the layout.

To add an [Outline] to a ui node you can spawn a (Node, Outline) tuple bundle:

# use bevy_ecs::prelude::*;
# use bevy_ui::prelude::*;
# use bevy_color::palettes::basic::{RED, BLUE};
fn setup_ui(mut commands: Commands) {
    commands.spawn((
        Node {
            width: Val::Px(100.),
            height: Val::Px(100.),
            ..Default::default()
        },
        BackgroundColor(BLUE.into()),
        Outline::new(Val::Px(10.), Val::ZERO, RED.into())
    ));
}

[Outline] components can also be added later to existing UI nodes:

# use bevy_ecs::prelude::*;
# use bevy_ui::prelude::*;
# use bevy_color::Color;
fn outline_hovered_button_system(
    mut commands: Commands,
    mut node_query: Query<(Entity, &Interaction, Option<&mut Outline>), Changed<Interaction>>,
) {
    for (entity, interaction, mut maybe_outline) in node_query.iter_mut() {
        let outline_color =
            if matches!(*interaction, Interaction::Hovered) {
                Color::WHITE
            } else {
                Color::NONE
            };
        if let Some(mut outline) = maybe_outline {
            outline.color = outline_color;
        } else {
            commands.entity(entity).insert(Outline::new(Val::Px(10.), Val::ZERO, outline_color));
        }
    }
}

Inserting and removing an [Outline] component repeatedly will result in table moves, so it is generally preferable to set Outline::color to [Color::NONE] to hide an outline.

Functions