Struct BorderColor 

pub struct BorderColor {
    pub top: Color,
    pub right: Color,
    pub bottom: Color,
    pub left: Color,
}

Available on crate feature bevy_ui only.

The border color of the UI node.

Fields

top: Color

right: Color

bottom: Color

left: Color

Implementations

impl BorderColor

pub const DEFAULT: BorderColor

Border color is transparent by default.

pub fn all(color: impl Into<Color>) -> BorderColor

Helper to create a BorderColor struct with all borders set to the given color

Examples found in repository

examples/ui/navigation/directional_navigation.rs (line 452)

fn highlight_focused_element(
    input_focus: Res<InputFocus>,
    input_focus_visible: Res<InputFocusVisible>,
    mut query: Query<(Entity, &mut BorderColor)>,
) {
    for (entity, mut border_color) in query.iter_mut() {
        if input_focus.get() == Some(entity) && input_focus_visible.0 {
            *border_color = BorderColor::all(FOCUSED_BORDER);
        } else {
            *border_color = BorderColor::DEFAULT;
        }
    }
}

examples/ui/navigation/directional_navigation_overrides.rs (line 795)

fn highlight_focused_element(
    input_focus: Res<InputFocus>,
    input_focus_visible: Res<InputFocusVisible>,
    mut query: Query<(Entity, &mut BorderColor, &Page)>,
) {
    for (entity, mut border_color, page) in query.iter_mut() {
        if input_focus.get() == Some(entity) && input_focus_visible.0 {
            *border_color = BorderColor::all(FOCUSED_BORDER_COLORS[page.0]);
        } else {
            *border_color = BorderColor::DEFAULT;
        }
    }
}

examples/showcase/mines.rs (line 199)

fn text_button(label: &'static str, action: ButtonAction) -> impl Bundle {
    (
        action,
        Node {
            min_width: px(144),
            border: px(3).all(),
            border_radius: px(8).into(),
            box_sizing: BoxSizing::ContentBox,
            ..default()
        },
        BorderColor::all(TILE_BORDER_COLOR),
        BackgroundColor(BACKGROUND_COLOR),
        Text::new(label),
        TextFont::from_font_size(24.0),
        TextLayout::justify(Justify::Center),
        LineHeight::Px(40.),
    )
}

fn setup(mut commands: Commands) {
    commands.spawn(Camera2d);
}

fn setup_menu(mut commands: Commands) {
    commands.spawn((
        DespawnOnExit(GameState::Menu),
        Node {
            width: percent(100),
            height: percent(100),
            flex_direction: FlexDirection::Column,
            justify_content: JustifyContent::Center,
            align_items: AlignItems::Center,
            row_gap: px(20),
            ..default()
        },
        children![
            (Text::new("Bevy Mines"), TextFont::from_font_size(35.0)),
            (
                Node {
                    flex_direction: FlexDirection::Column,
                    row_gap: px(10),
                    ..default()
                },
                children![
                    text_button("easy", ButtonAction::NewGame(Difficulty::Easy)),
                    text_button("normal", ButtonAction::NewGame(Difficulty::Normal)),
                    text_button("hard", ButtonAction::NewGame(Difficulty::Hard)),
                ],
            ),
        ],
    ));
}

fn setup_game(mut commands: Commands, game: Res<Game>, assets: Res<AssetServer>) {
    let root = commands
        .spawn((
            GameRoot,
            DespawnOnExit(GameState::Playing),
            Node {
                margin: auto().all(),
                ..default()
            },
        ))
        .id();

    rebuild_game_ui(&mut commands, root, &game, &assets);
}

fn rebuild_game_ui(commands: &mut Commands, root: Entity, game: &Game, assets: &AssetServer) {
    commands.entity(root).despawn_related::<Children>();

    commands.entity(root).with_children(|parent| {
        parent
            .spawn(Node {
                flex_direction: FlexDirection::Column,
                row_gap: px(20),
                ..default()
            })
            .with_children(|parent| {
                parent
                    .spawn((
                        Node {
                            display: Display::Grid,
                            padding: UiRect::all(px(BOARD_PADDING)),
                            border_radius: BorderRadius::all(px(25)),
                            row_gap: px(TILE_GAP),
                            column_gap: px(TILE_GAP),
                            grid_template_columns: RepeatedGridTrack::px(
                                game.field.width,
                                TILE_SIZE,
                            ),
                            grid_template_rows: RepeatedGridTrack::px(game.field.height, TILE_SIZE),
                            ..default()
                        },
                        BackgroundColor(BACKGROUND_COLOR),
                    ))
                    .with_children(|parent| {
                        for (position, tile) in game.field.iter() {
                            let tile_node = Node {
                                grid_column: GridPlacement::start((position.x + 1) as i16),
                                grid_row: GridPlacement::start((position.y + 1) as i16),
                                border: px(4).all(),
                                border_radius: px(8).into(),
                                justify_content: JustifyContent::Center,
                                align_items: AlignItems::Center,
                                ..default()
                            };

                            if game.game_over && tile.mined {
                                parent.spawn((
                                    tile_node,
                                    BackgroundColor(BACKGROUND_COLOR),
                                    BorderColor::all(Color::NONE),
                                    Pickable::IGNORE,
                                    children![(
                                        Text::new("*"),
                                        TextFont::from_font_size(24.0),
                                        TextColor(MOST_DANGER_COLOR),
                                    )],
                                ));
                            } else if game.game_over || tile.revealed {
                                let mine_count = game.field.count_adjacent_mines(position);
                                let color = match mine_count {
                                    0 => continue,
                                    1 => MILD_DANGER_COLOR,
                                    2 => SOME_DANGER_COLOR,
                                    3 => VERY_DANGER_COLOR,
                                    _ => MOST_DANGER_COLOR,
                                };
                                parent.spawn((
                                    tile_node,
                                    BackgroundColor(BACKGROUND_COLOR),
                                    BorderColor::all(color),
                                    Pickable::IGNORE,
                                    children![(
                                        Text::new(mine_count.to_string()),
                                        TextFont::from_font_size(20.0),
                                        TextColor(color),
                                    )],
                                ));
                            } else {
                                parent
                                    .spawn((
                                        tile_node,
                                        TileCell(position),
                                        BackgroundColor(BACKGROUND_COLOR),
                                        BorderColor::all(TILE_BORDER_COLOR),
                                    ))
                                    .with_children(|parent| {
                                        if tile.flagged {
                                            parent.spawn((
                                                ImageNode::new(assets.load("textures/flag.png")),
                                                Node {
                                                    width: px(20),
                                                    height: px(20),
                                                    ..default()
                                                },
                                                Pickable::IGNORE,
                                            ));
                                        }
                                    });
                            }
                        }
                    });

                parent
                    .spawn(Node {
                        width: percent(100),
                        height: px(50),
                        margin: px(15).vertical(),
                        justify_content: JustifyContent::SpaceBetween,
                        align_items: AlignItems::Center,
                        ..default()
                    })
                    .with_children(|parent| {
                        parent.spawn((
                            Node {
                                align_items: AlignItems::Center,
                                column_gap: px(3),
                                ..default()
                            },
                            children![
                                (
                                    ImageNode::new(assets.load("textures/flag.png")),
                                    Node {
                                        width: px(28),
                                        height: px(28),
                                        ..default()
                                    },
                                    Pickable::IGNORE,
                                ),
                                (
                                    Text::new(
                                        (game.field.mine_count() - game.field.flag_count())
                                            .to_string()
                                    ),
                                    TextFont::from_font_size(24.0),
                                )
                            ],
                        ));

                        if game.field.is_cleared() || game.game_over {
                            parent.spawn((
                                Node {
                                    width: percent(100),
                                    height: percent(100),
                                    position_type: PositionType::Absolute,
                                    justify_content: JustifyContent::Center,
                                    align_items: AlignItems::Center,
                                    ..default()
                                },
                                Pickable::IGNORE,
                                children![(
                                    Text::new(if game.field.is_cleared() {
                                        "mines cleared!"
                                    } else {
                                        "boom!"
                                    }),
                                    TextFont::from_font_size(24.0),
                                )],
                            ));

                            parent.spawn(text_button("new game", ButtonAction::Menu));
                        }
                    });
            });
    });
}

examples/ui/widgets/standard_widgets.rs (line 207)

fn button(asset_server: &AssetServer) -> impl Bundle {
    (
        Node {
            width: px(150),
            height: px(65),
            border: UiRect::all(px(5)),
            border_radius: BorderRadius::MAX,
            justify_content: JustifyContent::Center,
            align_items: AlignItems::Center,
            ..default()
        },
        DemoButton,
        Button,
        Hovered::default(),
        TabIndex(0),
        BorderColor::all(Color::BLACK),
        BackgroundColor(NORMAL_BUTTON),
        children![(
            Text::new("Button"),
            TextFont {
                font: asset_server.load("fonts/FiraSans-Bold.ttf").into(),
                font_size: FontSize::Px(33.0),
                ..default()
            },
            TextColor(Color::srgb(0.9, 0.9, 0.9)),
            TextShadow::default(),
        )],
    )
}

fn menu_button(asset_server: &AssetServer) -> impl Bundle {
    (
        Node { ..default() },
        DemoMenuAnchor,
        observe(on_menu_event),
        children![(
            Node {
                width: px(200),
                height: px(65),
                border: UiRect::all(px(5)),
                box_sizing: BoxSizing::BorderBox,
                justify_content: JustifyContent::SpaceBetween,
                align_items: AlignItems::Center,
                padding: UiRect::axes(px(16), px(0)),
                border_radius: BorderRadius::all(px(5)),
                ..default()
            },
            DemoMenuButton,
            Button,
            MenuButton,
            Hovered::default(),
            TabIndex(0),
            BorderColor::all(Color::BLACK),
            BackgroundColor(NORMAL_BUTTON),
            children![
                (
                    Text::new("Menu"),
                    TextFont {
                        font: asset_server.load("fonts/FiraSans-Bold.ttf").into(),
                        font_size: FontSize::Px(33.0),
                        ..default()
                    },
                    TextColor(Color::srgb(0.9, 0.9, 0.9)),
                    TextShadow::default(),
                ),
                (
                    Node {
                        width: px(12),
                        height: px(12),
                        ..default()
                    },
                    BackgroundColor(GRAY.into()),
                )
            ],
        )],
    )
}

fn update_button_style(
    mut buttons: Query<
        (
            Has<Pressed>,
            &Hovered,
            Has<InteractionDisabled>,
            &mut BackgroundColor,
            &mut BorderColor,
            &Children,
        ),
        (
            Or<(
                Changed<Pressed>,
                Changed<Hovered>,
                Added<InteractionDisabled>,
            )>,
            With<DemoButton>,
        ),
    >,
    mut text_query: Query<&mut Text>,
) {
    for (pressed, hovered, disabled, mut color, mut border_color, children) in &mut buttons {
        let mut text = text_query.get_mut(children[0]).unwrap();
        set_button_style(
            disabled,
            hovered.get(),
            pressed,
            &mut color,
            &mut border_color,
            &mut text,
        );
    }
}

/// Supplementary system to detect removed marker components
fn update_button_style2(
    mut buttons: Query<
        (
            Has<Pressed>,
            &Hovered,
            Has<InteractionDisabled>,
            &mut BackgroundColor,
            &mut BorderColor,
            &Children,
        ),
        With<DemoButton>,
    >,
    mut removed_depressed: RemovedComponents<Pressed>,
    mut removed_disabled: RemovedComponents<InteractionDisabled>,
    mut text_query: Query<&mut Text>,
) {
    removed_depressed
        .read()
        .chain(removed_disabled.read())
        .for_each(|entity| {
            if let Ok((pressed, hovered, disabled, mut color, mut border_color, children)) =
                buttons.get_mut(entity)
            {
                let mut text = text_query.get_mut(children[0]).unwrap();
                set_button_style(
                    disabled,
                    hovered.get(),
                    pressed,
                    &mut color,
                    &mut border_color,
                    &mut text,
                );
            }
        });
}

fn set_button_style(
    disabled: bool,
    hovered: bool,
    pressed: bool,
    color: &mut BackgroundColor,
    border_color: &mut BorderColor,
    text: &mut Text,
) {
    match (disabled, hovered, pressed) {
        // Disabled button
        (true, _, _) => {
            **text = "Disabled".to_string();
            *color = NORMAL_BUTTON.into();
            border_color.set_all(GRAY);
        }

        // Pressed and hovered button
        (false, true, true) => {
            **text = "Press".to_string();
            *color = PRESSED_BUTTON.into();
            border_color.set_all(RED);
        }

        // Hovered, unpressed button
        (false, true, false) => {
            **text = "Hover".to_string();
            *color = HOVERED_BUTTON.into();
            border_color.set_all(WHITE);
        }

        // Unhovered button (either pressed or not).
        (false, false, _) => {
            **text = "Button".to_string();
            *color = NORMAL_BUTTON.into();
            border_color.set_all(BLACK);
        }
    }
}

/// Create a demo slider
fn slider(min: f32, max: f32, value: f32) -> impl Bundle {
    (
        Node {
            display: Display::Flex,
            flex_direction: FlexDirection::Column,
            justify_content: JustifyContent::Center,
            align_items: AlignItems::Stretch,
            justify_items: JustifyItems::Center,
            column_gap: px(4),
            height: px(12),
            width: percent(30),
            ..default()
        },
        Name::new("Slider"),
        Hovered::default(),
        DemoSlider,
        Slider {
            track_click: TrackClick::Snap,
            ..Default::default()
        },
        SliderValue(value),
        SliderRange::new(min, max),
        TabIndex(0),
        Children::spawn((
            // Slider background rail
            Spawn((
                Node {
                    height: px(6),
                    border_radius: BorderRadius::all(px(3)),
                    ..default()
                },
                BackgroundColor(SLIDER_TRACK), // Border color for the slider
            )),
            // Invisible track to allow absolute placement of thumb entity. This is narrower than
            // the actual slider, which allows us to position the thumb entity using simple
            // percentages, without having to measure the actual width of the slider thumb.
            Spawn((
                Node {
                    display: Display::Flex,
                    position_type: PositionType::Absolute,
                    left: px(0),
                    // Track is short by 12px to accommodate the thumb.
                    right: px(12),
                    top: px(0),
                    bottom: px(0),
                    ..default()
                },
                children![(
                    // Thumb
                    DemoSliderThumb,
                    SliderThumb,
                    Node {
                        display: Display::Flex,
                        width: px(12),
                        height: px(12),
                        position_type: PositionType::Absolute,
                        left: percent(0), // This will be updated by the slider's value
                        border_radius: BorderRadius::MAX,
                        ..default()
                    },
                    BackgroundColor(SLIDER_THUMB),
                )],
            )),
        )),
    )
}

/// Update the visuals of the slider based on the slider state.
fn update_slider_style(
    sliders: Query<
        (
            Entity,
            &SliderValue,
            &SliderRange,
            &Hovered,
            &SliderDragState,
            Has<InteractionDisabled>,
        ),
        (
            Or<(
                Changed<SliderValue>,
                Changed<SliderRange>,
                Changed<Hovered>,
                Changed<SliderDragState>,
                Added<InteractionDisabled>,
            )>,
            With<DemoSlider>,
        ),
    >,
    children: Query<&Children>,
    mut thumbs: Query<(&mut Node, &mut BackgroundColor, Has<DemoSliderThumb>), Without<DemoSlider>>,
) {
    for (slider_ent, value, range, hovered, drag_state, disabled) in sliders.iter() {
        for child in children.iter_descendants(slider_ent) {
            if let Ok((mut thumb_node, mut thumb_bg, is_thumb)) = thumbs.get_mut(child)
                && is_thumb
            {
                thumb_node.left = percent(range.thumb_position(value.0) * 100.0);
                thumb_bg.0 = thumb_color(disabled, hovered.0 | drag_state.dragging);
            }
        }
    }
}

fn update_slider_style2(
    sliders: Query<
        (Entity, &Hovered, &SliderDragState, Has<InteractionDisabled>),
        With<DemoSlider>,
    >,
    children: Query<&Children>,
    mut thumbs: Query<(&mut BackgroundColor, Has<DemoSliderThumb>), Without<DemoSlider>>,
    mut removed_disabled: RemovedComponents<InteractionDisabled>,
) {
    removed_disabled.read().for_each(|entity| {
        if let Ok((slider_ent, hovered, drag_state, disabled)) = sliders.get(entity) {
            for child in children.iter_descendants(slider_ent) {
                if let Ok((mut thumb_bg, is_thumb)) = thumbs.get_mut(child)
                    && is_thumb
                {
                    thumb_bg.0 = thumb_color(disabled, hovered.0 | drag_state.dragging);
                }
            }
        }
    });
}

fn thumb_color(disabled: bool, hovered: bool) -> Color {
    match (disabled, hovered) {
        (true, _) => ELEMENT_FILL_DISABLED,

        (false, true) => SLIDER_THUMB.lighter(0.3),

        _ => SLIDER_THUMB,
    }
}

/// Create a demo checkbox
fn checkbox(asset_server: &AssetServer, caption: &str) -> impl Bundle {
    (
        Node {
            display: Display::Flex,
            flex_direction: FlexDirection::Row,
            justify_content: JustifyContent::FlexStart,
            align_items: AlignItems::Center,
            align_content: AlignContent::Center,
            column_gap: px(4),
            ..default()
        },
        Name::new("Checkbox"),
        Hovered::default(),
        DemoCheckbox,
        Checkbox,
        TabIndex(0),
        Children::spawn((
            Spawn((
                // Checkbox outer
                Node {
                    display: Display::Flex,
                    width: px(16),
                    height: px(16),
                    border: UiRect::all(px(2)),
                    border_radius: BorderRadius::all(px(3)),
                    ..default()
                },
                BorderColor::all(ELEMENT_OUTLINE), // Border color for the checkbox
                children![
                    // Checkbox inner
                    (
                        Node {
                            display: Display::Flex,
                            width: px(8),
                            height: px(8),
                            position_type: PositionType::Absolute,
                            left: px(2),
                            top: px(2),
                            ..default()
                        },
                        BackgroundColor(ELEMENT_FILL),
                    ),
                ],
            )),
            Spawn((
                Text::new(caption),
                TextFont {
                    font: asset_server.load("fonts/FiraSans-Bold.ttf").into(),
                    font_size: FontSize::Px(20.0),
                    ..default()
                },
            )),
        )),
    )
}

// Update the element's styles.
fn update_checkbox_or_radio_style(
    mut q_checkbox: Query<
        (Has<Checked>, &Hovered, Has<InteractionDisabled>, &Children),
        (
            Or<(With<DemoCheckbox>, With<DemoRadio>)>,
            Or<(
                Added<DemoCheckbox>,
                Changed<Hovered>,
                Added<Checked>,
                Added<InteractionDisabled>,
            )>,
        ),
    >,
    mut q_border_color: Query<
        (&mut BorderColor, &mut Children),
        (Without<DemoCheckbox>, Without<DemoRadio>),
    >,
    mut q_bg_color: Query<&mut BackgroundColor, (Without<DemoCheckbox>, Without<Children>)>,
) {
    for (checked, Hovered(is_hovering), is_disabled, children) in q_checkbox.iter_mut() {
        let Some(border_id) = children.first() else {
            continue;
        };

        let Ok((mut border_color, border_children)) = q_border_color.get_mut(*border_id) else {
            continue;
        };

        let Some(mark_id) = border_children.first() else {
            warn!("Checkbox does not have a mark entity.");
            continue;
        };

        let Ok(mut mark_bg) = q_bg_color.get_mut(*mark_id) else {
            warn!("Checkbox mark entity lacking a background color.");
            continue;
        };

        set_checkbox_or_radio_style(
            is_disabled,
            *is_hovering,
            checked,
            &mut border_color,
            &mut mark_bg,
        );
    }
}

fn update_checkbox_or_radio_style2(
    mut q_checkbox: Query<
        (Has<Checked>, &Hovered, Has<InteractionDisabled>, &Children),
        Or<(With<DemoCheckbox>, With<DemoRadio>)>,
    >,
    mut q_border_color: Query<
        (&mut BorderColor, &mut Children),
        (Without<DemoCheckbox>, Without<DemoRadio>),
    >,
    mut q_bg_color: Query<
        &mut BackgroundColor,
        (Without<DemoCheckbox>, Without<DemoRadio>, Without<Children>),
    >,
    mut removed_checked: RemovedComponents<Checked>,
    mut removed_disabled: RemovedComponents<InteractionDisabled>,
) {
    removed_checked
        .read()
        .chain(removed_disabled.read())
        .for_each(|entity| {
            if let Ok((checked, Hovered(is_hovering), is_disabled, children)) =
                q_checkbox.get_mut(entity)
            {
                let Some(border_id) = children.first() else {
                    return;
                };

                let Ok((mut border_color, border_children)) = q_border_color.get_mut(*border_id)
                else {
                    return;
                };

                let Some(mark_id) = border_children.first() else {
                    warn!("Checkbox does not have a mark entity.");
                    return;
                };

                let Ok(mut mark_bg) = q_bg_color.get_mut(*mark_id) else {
                    warn!("Checkbox mark entity lacking a background color.");
                    return;
                };

                set_checkbox_or_radio_style(
                    is_disabled,
                    *is_hovering,
                    checked,
                    &mut border_color,
                    &mut mark_bg,
                );
            }
        });
}

fn set_checkbox_or_radio_style(
    disabled: bool,
    hovering: bool,
    checked: bool,
    border_color: &mut BorderColor,
    mark_bg: &mut BackgroundColor,
) {
    let color: Color = if disabled {
        // If the element is disabled, use a lighter color
        ELEMENT_OUTLINE.with_alpha(0.2)
    } else if hovering {
        // If hovering, use a lighter color
        ELEMENT_OUTLINE.lighter(0.2)
    } else {
        // Default color for the element
        ELEMENT_OUTLINE
    };

    // Update the background color of the element
    border_color.set_all(color);

    let mark_color: Color = match (disabled, checked) {
        (true, true) => ELEMENT_FILL_DISABLED,
        (false, true) => ELEMENT_FILL,
        (_, false) => Srgba::NONE.into(),
    };

    if mark_bg.0 != mark_color {
        // Update the color of the element
        mark_bg.0 = mark_color;
    }
}

/// Create a demo radio group
fn radio_group(asset_server: &AssetServer) -> impl Bundle {
    (
        Node {
            display: Display::Flex,
            flex_direction: FlexDirection::Column,
            align_items: AlignItems::Start,
            column_gap: px(4),
            ..default()
        },
        Name::new("RadioGroup"),
        RadioGroup,
        TabIndex::default(),
        children![
            (radio(asset_server, TrackClick::Drag, "Slider Drag"),),
            (radio(asset_server, TrackClick::Step, "Slider Step"),),
            (radio(asset_server, TrackClick::Snap, "Slider Snap"),)
        ],
    )
}

/// Create a demo radio button
fn radio(asset_server: &AssetServer, value: TrackClick, caption: &str) -> impl Bundle {
    (
        Node {
            display: Display::Flex,
            flex_direction: FlexDirection::Row,
            justify_content: JustifyContent::FlexStart,
            align_items: AlignItems::Center,
            align_content: AlignContent::Center,
            column_gap: px(4),
            ..default()
        },
        Name::new("RadioButton"),
        Hovered::default(),
        DemoRadio(value),
        RadioButton,
        Children::spawn((
            Spawn((
                // Radio outer
                Node {
                    display: Display::Flex,
                    width: px(16),
                    height: px(16),
                    border: UiRect::all(px(2)),
                    border_radius: BorderRadius::MAX,
                    ..default()
                },
                BorderColor::all(ELEMENT_OUTLINE), // Border color for the radio button
                children![
                    // Radio inner
                    (
                        Node {
                            display: Display::Flex,
                            width: px(8),
                            height: px(8),
                            position_type: PositionType::Absolute,
                            left: px(2),
                            top: px(2),
                            border_radius: BorderRadius::MAX,
                            ..default()
                        },
                        BackgroundColor(ELEMENT_FILL),
                    ),
                ],
            )),
            Spawn((
                Text::new(caption),
                TextFont {
                    font: asset_server.load("fonts/FiraSans-Bold.ttf").into(),
                    font_size: FontSize::Px(20.0),
                    ..default()
                },
            )),
        )),
    )
}

fn on_menu_event(
    menu_event: On<MenuEvent>,
    q_anchor: Single<(Entity, &Children), With<DemoMenuAnchor>>,
    q_popup: Query<Entity, With<MenuPopup>>,
    assets: Res<AssetServer>,
    mut focus: ResMut<InputFocus>,
    mut commands: Commands,
) {
    let (anchor, children) = q_anchor.into_inner();
    let popup = children.iter().find_map(|c| q_popup.get(c).ok());
    info!("Menu action: {:?}", menu_event.action);
    match menu_event.action {
        MenuAction::Open(_) => {
            if popup.is_none() {
                spawn_menu(anchor, assets, commands);
            }
        }
        MenuAction::Toggle => match popup {
            Some(popup) => commands.entity(popup).despawn(),
            None => spawn_menu(anchor, assets, commands),
        },
        MenuAction::CloseAll => {
            if let Some(popup) = popup {
                commands.entity(popup).despawn();
            }
        }
        MenuAction::FocusRoot => {
            focus.set(anchor, FocusCause::Navigated);
        }
    }
}

fn spawn_menu(anchor: Entity, assets: Res<AssetServer>, mut commands: Commands) {
    let menu = commands
        .spawn((
            Node {
                display: Display::Flex,
                flex_direction: FlexDirection::Column,
                min_height: px(10.),
                min_width: percent(100),
                border: UiRect::all(px(1)),
                position_type: PositionType::Absolute,
                ..default()
            },
            MenuPopup::default(),
            BorderColor::all(GREEN),
            BackgroundColor(GRAY.into()),
            BoxShadow::new(
                Srgba::BLACK.with_alpha(0.9).into(),
                px(0),
                px(0),
                px(1),
                px(4),
            ),
            GlobalZIndex(100),
            Popover {
                positions: vec![
                    PopoverPlacement {
                        side: PopoverSide::Bottom,
                        align: PopoverAlign::Start,
                        gap: 2.0,
                    },
                    PopoverPlacement {
                        side: PopoverSide::Top,
                        align: PopoverAlign::Start,
                        gap: 2.0,
                    },
                ],
                window_margin: 10.0,
            },
            OverrideClip,
            children![
                menu_item(&assets),
                menu_item(&assets),
                menu_item(&assets),
                menu_item(&assets)
            ],
        ))
        .id();
    commands.entity(anchor).add_child(menu);
}

examples/ui/widgets/standard_widgets_observers.rs (line 139)

fn button(asset_server: &AssetServer) -> impl Bundle {
    (
        Node {
            width: px(150),
            height: px(65),
            border: UiRect::all(px(5)),
            justify_content: JustifyContent::Center,
            align_items: AlignItems::Center,
            border_radius: BorderRadius::MAX,
            ..default()
        },
        DemoButton,
        Button,
        Hovered::default(),
        TabIndex(0),
        BorderColor::all(Color::BLACK),
        BackgroundColor(NORMAL_BUTTON),
        children![(
            Text::new("Button"),
            TextFont {
                font: asset_server.load("fonts/FiraSans-Bold.ttf").into(),
                font_size: FontSize::Px(33.0),
                ..default()
            },
            TextColor(Color::srgb(0.9, 0.9, 0.9)),
            TextShadow::default(),
        )],
    )
}

fn button_on_interaction<E: EventPattern<Event: EntityEvent>>(
    event: On<E>,
    mut buttons: Query<
        (
            &Hovered,
            Has<InteractionDisabled>,
            Has<Pressed>,
            &mut BackgroundColor,
            &mut BorderColor,
            &Children,
        ),
        With<DemoButton>,
    >,
    mut text_query: Query<&mut Text>,
) {
    if let Ok((hovered, disabled, pressed, mut color, mut border_color, children)) =
        buttons.get_mut(event.event_target())
    {
        if children.is_empty() {
            return;
        }
        let Ok(mut text) = text_query.get_mut(children[0]) else {
            return;
        };
        let hovered = hovered.get();
        // These "removal event checks" exist because the `Remove` event is triggered _before_ the component is actually
        // removed, meaning it still shows up in the query. We're investigating the best way to improve this scenario.
        let pressed = pressed && !(E::Event::is::<RemoveEvent>() && E::Components::is::<Pressed>());
        let disabled = disabled
            && !(E::Event::is::<RemoveEvent>() && E::Components::is::<InteractionDisabled>());
        match (disabled, hovered, pressed) {
            // Disabled button
            (true, _, _) => {
                **text = "Disabled".to_string();
                *color = NORMAL_BUTTON.into();
                border_color.set_all(GRAY);
            }

            // Pressed and hovered button
            (false, true, true) => {
                **text = "Press".to_string();
                *color = PRESSED_BUTTON.into();
                border_color.set_all(RED);
            }

            // Hovered, unpressed button
            (false, true, false) => {
                **text = "Hover".to_string();
                *color = HOVERED_BUTTON.into();
                border_color.set_all(WHITE);
            }

            // Unhovered button (either pressed or not).
            (false, false, _) => {
                **text = "Button".to_string();
                *color = NORMAL_BUTTON.into();
                border_color.set_all(BLACK);
            }
        }
    }
}

/// Create a demo slider
fn slider(min: f32, max: f32, value: f32) -> impl Bundle {
    (
        Node {
            display: Display::Flex,
            flex_direction: FlexDirection::Column,
            justify_content: JustifyContent::Center,
            align_items: AlignItems::Stretch,
            justify_items: JustifyItems::Center,
            column_gap: px(4),
            height: px(12),
            width: percent(30),
            ..default()
        },
        Name::new("Slider"),
        Hovered::default(),
        DemoSlider,
        Slider::default(),
        SliderValue(value),
        SliderRange::new(min, max),
        TabIndex(0),
        Children::spawn((
            // Slider background rail
            Spawn((
                Node {
                    height: px(6),
                    border_radius: BorderRadius::all(px(3)),
                    ..default()
                },
                BackgroundColor(SLIDER_TRACK), // Border color for the checkbox
            )),
            // Invisible track to allow absolute placement of thumb entity. This is narrower than
            // the actual slider, which allows us to position the thumb entity using simple
            // percentages, without having to measure the actual width of the slider thumb.
            Spawn((
                Node {
                    display: Display::Flex,
                    position_type: PositionType::Absolute,
                    left: px(0),
                    // Track is short by 12px to accommodate the thumb.
                    right: px(12),
                    top: px(0),
                    bottom: px(0),
                    ..default()
                },
                children![(
                    // Thumb
                    DemoSliderThumb,
                    SliderThumb,
                    Node {
                        display: Display::Flex,
                        width: px(12),
                        height: px(12),
                        position_type: PositionType::Absolute,
                        left: percent(0), // This will be updated by the slider's value
                        border_radius: BorderRadius::MAX,
                        ..default()
                    },
                    BackgroundColor(SLIDER_THUMB),
                )],
            )),
        )),
    )
}

fn slider_on_interaction<E: EventPattern<Event: EntityEvent>>(
    event: On<E>,
    sliders: Query<(Entity, &Hovered, Has<InteractionDisabled>), With<DemoSlider>>,
    children: Query<&Children>,
    mut thumbs: Query<(&mut BackgroundColor, Has<DemoSliderThumb>), Without<DemoSlider>>,
) {
    if let Ok((slider_ent, hovered, disabled)) = sliders.get(event.event_target()) {
        // These "removal event checks" exist because the `Remove` event is triggered _before_ the component is actually
        // removed, meaning it still shows up in the query. We're investigating the best way to improve this scenario.
        let disabled = disabled
            && !(E::Event::is::<RemoveEvent>() && E::Components::is::<InteractionDisabled>());
        for child in children.iter_descendants(slider_ent) {
            if let Ok((mut thumb_bg, is_thumb)) = thumbs.get_mut(child)
                && is_thumb
            {
                thumb_bg.0 = thumb_color(disabled, hovered.0);
            }
        }
    }
}

fn slider_on_change_value<C: Component>(
    insert: On<Insert<C>>,
    sliders: Query<(Entity, &SliderValue, &SliderRange), With<DemoSlider>>,
    children: Query<&Children>,
    mut thumbs: Query<(&mut Node, Has<DemoSliderThumb>), Without<DemoSlider>>,
) {
    if let Ok((slider_ent, value, range)) = sliders.get(insert.entity) {
        for child in children.iter_descendants(slider_ent) {
            if let Ok((mut thumb_node, is_thumb)) = thumbs.get_mut(child)
                && is_thumb
            {
                thumb_node.left = percent(range.thumb_position(value.0) * 100.0);
            }
        }
    }
}

fn thumb_color(disabled: bool, hovered: bool) -> Color {
    match (disabled, hovered) {
        (true, _) => GRAY.into(),

        (false, true) => SLIDER_THUMB.lighter(0.3),

        _ => SLIDER_THUMB,
    }
}

/// Create a demo checkbox
fn checkbox(asset_server: &AssetServer, caption: &str) -> impl Bundle {
    (
        Node {
            display: Display::Flex,
            flex_direction: FlexDirection::Row,
            justify_content: JustifyContent::FlexStart,
            align_items: AlignItems::Center,
            align_content: AlignContent::Center,
            column_gap: px(4),
            ..default()
        },
        Name::new("Checkbox"),
        Hovered::default(),
        DemoCheckbox,
        Checkbox,
        TabIndex(0),
        Children::spawn((
            Spawn((
                // Checkbox outer
                Node {
                    display: Display::Flex,
                    width: px(16),
                    height: px(16),
                    border: UiRect::all(px(2)),
                    border_radius: BorderRadius::all(px(3)),
                    ..default()
                },
                BorderColor::all(CHECKBOX_OUTLINE), // Border color for the checkbox
                children![
                    // Checkbox inner
                    (
                        Node {
                            display: Display::Flex,
                            width: px(8),
                            height: px(8),
                            position_type: PositionType::Absolute,
                            left: px(2),
                            top: px(2),
                            ..default()
                        },
                        BackgroundColor(Srgba::NONE.into()),
                    ),
                ],
            )),
            Spawn((
                Text::new(caption),
                TextFont {
                    font: asset_server.load("fonts/FiraSans-Bold.ttf").into(),
                    font_size: FontSize::Px(20.0),
                    ..default()
                },
            )),
        )),
    )
}

examples/animation/animation_graph.rs (line 357)

fn setup_node_lines(commands: &mut Commands) {
    for line in &HORIZONTAL_LINES {
        commands.spawn((
            Node {
                position_type: PositionType::Absolute,
                bottom: px(line.bottom),
                left: px(line.left),
                height: px(0),
                width: px(line.length),
                border: UiRect::bottom(px(1)),
                ..default()
            },
            BorderColor::all(WHITE),
        ));
    }

    for line in &VERTICAL_LINES {
        commands.spawn((
            Node {
                position_type: PositionType::Absolute,
                bottom: px(line.bottom),
                left: px(line.left),
                height: px(line.length),
                width: px(0),
                border: UiRect::left(px(1)),
                ..default()
            },
            BorderColor::all(WHITE),
        ));
    }
}

Additional examples can be found in:

• examples/ui/styling/gradients.rs
• examples/ui/images/image_node.rs
• examples/ui/text/editable_text_filter.rs
• examples/ui/widgets/button.rs
• examples/ui/widgets/viewport_node.rs
• examples/camera/2d_on_ui.rs
• examples/ui/text/text_background_colors.rs
• examples/ui/layout/size_constraints.rs
• examples/asset/asset_saving.rs
• examples/ui/ui_target_camera.rs
• examples/ui/scroll_and_overflow/overflow.rs
• examples/ui/scroll_and_overflow/overflow_clip_margin.rs
• examples/ui/widgets/tab_navigation.rs
• examples/ui/scroll_and_overflow/scrollbars.rs
• examples/ui/scroll_and_overflow/overflow_transform.rs
• examples/testbed/ui.rs
• examples/stress_tests/many_text.rs
• examples/ui/ui_drag_and_drop.rs
• examples/ui/text/multiple_text_inputs.rs
• examples/testbed/full_ui.rs
• examples/ui/text/multiline_text_input.rs

pub fn set_all(&mut self, color: impl Into<Color>) -> &mut BorderColor

Helper to set all border colors to a given color.

Examples found in repository

examples/showcase/mines.rs (line 449)

fn on_button_over(
    over: On<PointerOver>,
    mut buttons: Query<(&mut BorderColor, &mut BackgroundColor), With<ButtonAction>>,
) {
    if let Ok((mut border, mut background)) = buttons.get_mut(over.event_target()) {
        border.set_all(HOVERED_TILE_BORDER_COLOR);
        background.0 = BACKGROUND_COLOR;
    }
}

fn on_button_out(
    out: On<PointerOut>,
    mut buttons: Query<(&mut BorderColor, &mut BackgroundColor), With<ButtonAction>>,
) {
    if let Ok((mut border, mut background)) = buttons.get_mut(out.event_target()) {
        border.set_all(TILE_BORDER_COLOR);
        background.0 = BACKGROUND_COLOR;
    }
}

fn on_tile_over(over: On<PointerOver>, mut tiles: Query<&mut BorderColor, With<TileCell>>) {
    if let Ok(mut border) = tiles.get_mut(over.event_target()) {
        border.set_all(HOVERED_TILE_BORDER_COLOR);
    }
}

fn on_tile_out(out: On<PointerOut>, mut tiles: Query<&mut BorderColor, With<TileCell>>) {
    if let Ok(mut border) = tiles.get_mut(out.event_target()) {
        border.set_all(TILE_BORDER_COLOR);
    }
}

examples/ui/text/multiple_text_inputs.rs (line 374)

fn update_row_border_colors(
    input_focus: Res<InputFocus>,
    input_rows: Query<&TextInputRow, With<EditableText>>,
    mut row_borders: Query<(&TextInputRow, &mut BorderColor, Has<EditableText>)>,
) {
    if !input_focus.is_changed() {
        return;
    }

    let focused_row = input_focus
        .get()
        .and_then(|focused_entity| input_rows.get(focused_entity).ok())
        .map(|row| row.0);

    for (row, mut border_color, is_input) in &mut row_borders {
        let mut color = if is_input {
            SLATE_300.into()
        } else {
            Color::WHITE
        };
        if Some(row.0) != focused_row {
            color = color.darker(0.75);
        }
        border_color.set_all(color);
    }
}

examples/ui/widgets/headless_tabs.rs (lines 204-208)

fn update_tab_styles(
    focus: Res<InputFocus>,
    focus_visible: Res<InputFocusVisible>,
    mut tabs: Query<
        (
            Entity,
            &Hovered,
            Has<Selected>,
            Has<InteractionDisabled>,
            &mut BackgroundColor,
            &mut BorderColor,
        ),
        With<ShowcaseTab>,
    >,
) {
    for (entity, hovered, selected, disabled, mut background, mut border) in &mut tabs {
        background.0 = match (disabled, selected, hovered.get()) {
            (true, _, _) => Color::srgb(0.10, 0.10, 0.11),
            (false, true, _) => Color::srgb(0.18, 0.34, 0.52),
            (false, false, true) => Color::srgb(0.20, 0.21, 0.26),
            _ => Color::srgb(0.13, 0.14, 0.18),
        };
        border.set_all(if focus_visible.0 && focus.get() == Some(entity) {
            Color::srgb(0.45, 0.78, 1.0)
        } else {
            Color::srgb(0.24, 0.25, 0.30)
        });
    }
}

examples/ui/widgets/standard_widgets.rs (line 354)

fn set_button_style(
    disabled: bool,
    hovered: bool,
    pressed: bool,
    color: &mut BackgroundColor,
    border_color: &mut BorderColor,
    text: &mut Text,
) {
    match (disabled, hovered, pressed) {
        // Disabled button
        (true, _, _) => {
            **text = "Disabled".to_string();
            *color = NORMAL_BUTTON.into();
            border_color.set_all(GRAY);
        }

        // Pressed and hovered button
        (false, true, true) => {
            **text = "Press".to_string();
            *color = PRESSED_BUTTON.into();
            border_color.set_all(RED);
        }

        // Hovered, unpressed button
        (false, true, false) => {
            **text = "Hover".to_string();
            *color = HOVERED_BUTTON.into();
            border_color.set_all(WHITE);
        }

        // Unhovered button (either pressed or not).
        (false, false, _) => {
            **text = "Button".to_string();
            *color = NORMAL_BUTTON.into();
            border_color.set_all(BLACK);
        }
    }
}

/// Create a demo slider
fn slider(min: f32, max: f32, value: f32) -> impl Bundle {
    (
        Node {
            display: Display::Flex,
            flex_direction: FlexDirection::Column,
            justify_content: JustifyContent::Center,
            align_items: AlignItems::Stretch,
            justify_items: JustifyItems::Center,
            column_gap: px(4),
            height: px(12),
            width: percent(30),
            ..default()
        },
        Name::new("Slider"),
        Hovered::default(),
        DemoSlider,
        Slider {
            track_click: TrackClick::Snap,
            ..Default::default()
        },
        SliderValue(value),
        SliderRange::new(min, max),
        TabIndex(0),
        Children::spawn((
            // Slider background rail
            Spawn((
                Node {
                    height: px(6),
                    border_radius: BorderRadius::all(px(3)),
                    ..default()
                },
                BackgroundColor(SLIDER_TRACK), // Border color for the slider
            )),
            // Invisible track to allow absolute placement of thumb entity. This is narrower than
            // the actual slider, which allows us to position the thumb entity using simple
            // percentages, without having to measure the actual width of the slider thumb.
            Spawn((
                Node {
                    display: Display::Flex,
                    position_type: PositionType::Absolute,
                    left: px(0),
                    // Track is short by 12px to accommodate the thumb.
                    right: px(12),
                    top: px(0),
                    bottom: px(0),
                    ..default()
                },
                children![(
                    // Thumb
                    DemoSliderThumb,
                    SliderThumb,
                    Node {
                        display: Display::Flex,
                        width: px(12),
                        height: px(12),
                        position_type: PositionType::Absolute,
                        left: percent(0), // This will be updated by the slider's value
                        border_radius: BorderRadius::MAX,
                        ..default()
                    },
                    BackgroundColor(SLIDER_THUMB),
                )],
            )),
        )),
    )
}

/// Update the visuals of the slider based on the slider state.
fn update_slider_style(
    sliders: Query<
        (
            Entity,
            &SliderValue,
            &SliderRange,
            &Hovered,
            &SliderDragState,
            Has<InteractionDisabled>,
        ),
        (
            Or<(
                Changed<SliderValue>,
                Changed<SliderRange>,
                Changed<Hovered>,
                Changed<SliderDragState>,
                Added<InteractionDisabled>,
            )>,
            With<DemoSlider>,
        ),
    >,
    children: Query<&Children>,
    mut thumbs: Query<(&mut Node, &mut BackgroundColor, Has<DemoSliderThumb>), Without<DemoSlider>>,
) {
    for (slider_ent, value, range, hovered, drag_state, disabled) in sliders.iter() {
        for child in children.iter_descendants(slider_ent) {
            if let Ok((mut thumb_node, mut thumb_bg, is_thumb)) = thumbs.get_mut(child)
                && is_thumb
            {
                thumb_node.left = percent(range.thumb_position(value.0) * 100.0);
                thumb_bg.0 = thumb_color(disabled, hovered.0 | drag_state.dragging);
            }
        }
    }
}

fn update_slider_style2(
    sliders: Query<
        (Entity, &Hovered, &SliderDragState, Has<InteractionDisabled>),
        With<DemoSlider>,
    >,
    children: Query<&Children>,
    mut thumbs: Query<(&mut BackgroundColor, Has<DemoSliderThumb>), Without<DemoSlider>>,
    mut removed_disabled: RemovedComponents<InteractionDisabled>,
) {
    removed_disabled.read().for_each(|entity| {
        if let Ok((slider_ent, hovered, drag_state, disabled)) = sliders.get(entity) {
            for child in children.iter_descendants(slider_ent) {
                if let Ok((mut thumb_bg, is_thumb)) = thumbs.get_mut(child)
                    && is_thumb
                {
                    thumb_bg.0 = thumb_color(disabled, hovered.0 | drag_state.dragging);
                }
            }
        }
    });
}

fn thumb_color(disabled: bool, hovered: bool) -> Color {
    match (disabled, hovered) {
        (true, _) => ELEMENT_FILL_DISABLED,

        (false, true) => SLIDER_THUMB.lighter(0.3),

        _ => SLIDER_THUMB,
    }
}

/// Create a demo checkbox
fn checkbox(asset_server: &AssetServer, caption: &str) -> impl Bundle {
    (
        Node {
            display: Display::Flex,
            flex_direction: FlexDirection::Row,
            justify_content: JustifyContent::FlexStart,
            align_items: AlignItems::Center,
            align_content: AlignContent::Center,
            column_gap: px(4),
            ..default()
        },
        Name::new("Checkbox"),
        Hovered::default(),
        DemoCheckbox,
        Checkbox,
        TabIndex(0),
        Children::spawn((
            Spawn((
                // Checkbox outer
                Node {
                    display: Display::Flex,
                    width: px(16),
                    height: px(16),
                    border: UiRect::all(px(2)),
                    border_radius: BorderRadius::all(px(3)),
                    ..default()
                },
                BorderColor::all(ELEMENT_OUTLINE), // Border color for the checkbox
                children![
                    // Checkbox inner
                    (
                        Node {
                            display: Display::Flex,
                            width: px(8),
                            height: px(8),
                            position_type: PositionType::Absolute,
                            left: px(2),
                            top: px(2),
                            ..default()
                        },
                        BackgroundColor(ELEMENT_FILL),
                    ),
                ],
            )),
            Spawn((
                Text::new(caption),
                TextFont {
                    font: asset_server.load("fonts/FiraSans-Bold.ttf").into(),
                    font_size: FontSize::Px(20.0),
                    ..default()
                },
            )),
        )),
    )
}

// Update the element's styles.
fn update_checkbox_or_radio_style(
    mut q_checkbox: Query<
        (Has<Checked>, &Hovered, Has<InteractionDisabled>, &Children),
        (
            Or<(With<DemoCheckbox>, With<DemoRadio>)>,
            Or<(
                Added<DemoCheckbox>,
                Changed<Hovered>,
                Added<Checked>,
                Added<InteractionDisabled>,
            )>,
        ),
    >,
    mut q_border_color: Query<
        (&mut BorderColor, &mut Children),
        (Without<DemoCheckbox>, Without<DemoRadio>),
    >,
    mut q_bg_color: Query<&mut BackgroundColor, (Without<DemoCheckbox>, Without<Children>)>,
) {
    for (checked, Hovered(is_hovering), is_disabled, children) in q_checkbox.iter_mut() {
        let Some(border_id) = children.first() else {
            continue;
        };

        let Ok((mut border_color, border_children)) = q_border_color.get_mut(*border_id) else {
            continue;
        };

        let Some(mark_id) = border_children.first() else {
            warn!("Checkbox does not have a mark entity.");
            continue;
        };

        let Ok(mut mark_bg) = q_bg_color.get_mut(*mark_id) else {
            warn!("Checkbox mark entity lacking a background color.");
            continue;
        };

        set_checkbox_or_radio_style(
            is_disabled,
            *is_hovering,
            checked,
            &mut border_color,
            &mut mark_bg,
        );
    }
}

fn update_checkbox_or_radio_style2(
    mut q_checkbox: Query<
        (Has<Checked>, &Hovered, Has<InteractionDisabled>, &Children),
        Or<(With<DemoCheckbox>, With<DemoRadio>)>,
    >,
    mut q_border_color: Query<
        (&mut BorderColor, &mut Children),
        (Without<DemoCheckbox>, Without<DemoRadio>),
    >,
    mut q_bg_color: Query<
        &mut BackgroundColor,
        (Without<DemoCheckbox>, Without<DemoRadio>, Without<Children>),
    >,
    mut removed_checked: RemovedComponents<Checked>,
    mut removed_disabled: RemovedComponents<InteractionDisabled>,
) {
    removed_checked
        .read()
        .chain(removed_disabled.read())
        .for_each(|entity| {
            if let Ok((checked, Hovered(is_hovering), is_disabled, children)) =
                q_checkbox.get_mut(entity)
            {
                let Some(border_id) = children.first() else {
                    return;
                };

                let Ok((mut border_color, border_children)) = q_border_color.get_mut(*border_id)
                else {
                    return;
                };

                let Some(mark_id) = border_children.first() else {
                    warn!("Checkbox does not have a mark entity.");
                    return;
                };

                let Ok(mut mark_bg) = q_bg_color.get_mut(*mark_id) else {
                    warn!("Checkbox mark entity lacking a background color.");
                    return;
                };

                set_checkbox_or_radio_style(
                    is_disabled,
                    *is_hovering,
                    checked,
                    &mut border_color,
                    &mut mark_bg,
                );
            }
        });
}

fn set_checkbox_or_radio_style(
    disabled: bool,
    hovering: bool,
    checked: bool,
    border_color: &mut BorderColor,
    mark_bg: &mut BackgroundColor,
) {
    let color: Color = if disabled {
        // If the element is disabled, use a lighter color
        ELEMENT_OUTLINE.with_alpha(0.2)
    } else if hovering {
        // If hovering, use a lighter color
        ELEMENT_OUTLINE.lighter(0.2)
    } else {
        // Default color for the element
        ELEMENT_OUTLINE
    };

    // Update the background color of the element
    border_color.set_all(color);

    let mark_color: Color = match (disabled, checked) {
        (true, true) => ELEMENT_FILL_DISABLED,
        (false, true) => ELEMENT_FILL,
        (_, false) => Srgba::NONE.into(),
    };

    if mark_bg.0 != mark_color {
        // Update the color of the element
        mark_bg.0 = mark_color;
    }
}

examples/ui/widgets/button.rs (line 134)

fn update_button_appearance(
    mut buttons: Query<
        (
            &Hovered,
            Has<Pressed>,
            &mut BackgroundColor,
            &mut BorderColor,
            &Children,
        ),
        With<Button>,
    >,
    mut text_query: Query<&mut Text>,
) {
    for (hovered, pressed, mut color, mut border_color, children) in &mut buttons {
        let Ok(mut text) = text_query.get_mut(children[0]) else {
            continue;
        };

        match (hovered.get(), pressed) {
            // Pressed (and, since you can only press what you're hovering, also hovered).
            (_, true) => {
                **text = "Press".to_string();
                *color = PRESSED_BUTTON.into();
                border_color.set_all(RED);
            }
            // Hovered but not pressed.
            (true, false) => {
                **text = "Hover".to_string();
                *color = HOVERED_BUTTON.into();
                border_color.set_all(WHITE);
            }
            // Neither hovered nor pressed.
            (false, false) => {
                **text = "Button".to_string();
                *color = NORMAL_BUTTON.into();
                border_color.set_all(BLACK);
            }
        }
    }
}

examples/ui/widgets/standard_widgets_observers.rs (line 189)

fn button_on_interaction<E: EventPattern<Event: EntityEvent>>(
    event: On<E>,
    mut buttons: Query<
        (
            &Hovered,
            Has<InteractionDisabled>,
            Has<Pressed>,
            &mut BackgroundColor,
            &mut BorderColor,
            &Children,
        ),
        With<DemoButton>,
    >,
    mut text_query: Query<&mut Text>,
) {
    if let Ok((hovered, disabled, pressed, mut color, mut border_color, children)) =
        buttons.get_mut(event.event_target())
    {
        if children.is_empty() {
            return;
        }
        let Ok(mut text) = text_query.get_mut(children[0]) else {
            return;
        };
        let hovered = hovered.get();
        // These "removal event checks" exist because the `Remove` event is triggered _before_ the component is actually
        // removed, meaning it still shows up in the query. We're investigating the best way to improve this scenario.
        let pressed = pressed && !(E::Event::is::<RemoveEvent>() && E::Components::is::<Pressed>());
        let disabled = disabled
            && !(E::Event::is::<RemoveEvent>() && E::Components::is::<InteractionDisabled>());
        match (disabled, hovered, pressed) {
            // Disabled button
            (true, _, _) => {
                **text = "Disabled".to_string();
                *color = NORMAL_BUTTON.into();
                border_color.set_all(GRAY);
            }

            // Pressed and hovered button
            (false, true, true) => {
                **text = "Press".to_string();
                *color = PRESSED_BUTTON.into();
                border_color.set_all(RED);
            }

            // Hovered, unpressed button
            (false, true, false) => {
                **text = "Hover".to_string();
                *color = HOVERED_BUTTON.into();
                border_color.set_all(WHITE);
            }

            // Unhovered button (either pressed or not).
            (false, false, _) => {
                **text = "Button".to_string();
                *color = NORMAL_BUTTON.into();
                border_color.set_all(BLACK);
            }
        }
    }
}

/// Create a demo slider
fn slider(min: f32, max: f32, value: f32) -> impl Bundle {
    (
        Node {
            display: Display::Flex,
            flex_direction: FlexDirection::Column,
            justify_content: JustifyContent::Center,
            align_items: AlignItems::Stretch,
            justify_items: JustifyItems::Center,
            column_gap: px(4),
            height: px(12),
            width: percent(30),
            ..default()
        },
        Name::new("Slider"),
        Hovered::default(),
        DemoSlider,
        Slider::default(),
        SliderValue(value),
        SliderRange::new(min, max),
        TabIndex(0),
        Children::spawn((
            // Slider background rail
            Spawn((
                Node {
                    height: px(6),
                    border_radius: BorderRadius::all(px(3)),
                    ..default()
                },
                BackgroundColor(SLIDER_TRACK), // Border color for the checkbox
            )),
            // Invisible track to allow absolute placement of thumb entity. This is narrower than
            // the actual slider, which allows us to position the thumb entity using simple
            // percentages, without having to measure the actual width of the slider thumb.
            Spawn((
                Node {
                    display: Display::Flex,
                    position_type: PositionType::Absolute,
                    left: px(0),
                    // Track is short by 12px to accommodate the thumb.
                    right: px(12),
                    top: px(0),
                    bottom: px(0),
                    ..default()
                },
                children![(
                    // Thumb
                    DemoSliderThumb,
                    SliderThumb,
                    Node {
                        display: Display::Flex,
                        width: px(12),
                        height: px(12),
                        position_type: PositionType::Absolute,
                        left: percent(0), // This will be updated by the slider's value
                        border_radius: BorderRadius::MAX,
                        ..default()
                    },
                    BackgroundColor(SLIDER_THUMB),
                )],
            )),
        )),
    )
}

fn slider_on_interaction<E: EventPattern<Event: EntityEvent>>(
    event: On<E>,
    sliders: Query<(Entity, &Hovered, Has<InteractionDisabled>), With<DemoSlider>>,
    children: Query<&Children>,
    mut thumbs: Query<(&mut BackgroundColor, Has<DemoSliderThumb>), Without<DemoSlider>>,
) {
    if let Ok((slider_ent, hovered, disabled)) = sliders.get(event.event_target()) {
        // These "removal event checks" exist because the `Remove` event is triggered _before_ the component is actually
        // removed, meaning it still shows up in the query. We're investigating the best way to improve this scenario.
        let disabled = disabled
            && !(E::Event::is::<RemoveEvent>() && E::Components::is::<InteractionDisabled>());
        for child in children.iter_descendants(slider_ent) {
            if let Ok((mut thumb_bg, is_thumb)) = thumbs.get_mut(child)
                && is_thumb
            {
                thumb_bg.0 = thumb_color(disabled, hovered.0);
            }
        }
    }
}

fn slider_on_change_value<C: Component>(
    insert: On<Insert<C>>,
    sliders: Query<(Entity, &SliderValue, &SliderRange), With<DemoSlider>>,
    children: Query<&Children>,
    mut thumbs: Query<(&mut Node, Has<DemoSliderThumb>), Without<DemoSlider>>,
) {
    if let Ok((slider_ent, value, range)) = sliders.get(insert.entity) {
        for child in children.iter_descendants(slider_ent) {
            if let Ok((mut thumb_node, is_thumb)) = thumbs.get_mut(child)
                && is_thumb
            {
                thumb_node.left = percent(range.thumb_position(value.0) * 100.0);
            }
        }
    }
}

fn thumb_color(disabled: bool, hovered: bool) -> Color {
    match (disabled, hovered) {
        (true, _) => GRAY.into(),

        (false, true) => SLIDER_THUMB.lighter(0.3),

        _ => SLIDER_THUMB,
    }
}

/// Create a demo checkbox
fn checkbox(asset_server: &AssetServer, caption: &str) -> impl Bundle {
    (
        Node {
            display: Display::Flex,
            flex_direction: FlexDirection::Row,
            justify_content: JustifyContent::FlexStart,
            align_items: AlignItems::Center,
            align_content: AlignContent::Center,
            column_gap: px(4),
            ..default()
        },
        Name::new("Checkbox"),
        Hovered::default(),
        DemoCheckbox,
        Checkbox,
        TabIndex(0),
        Children::spawn((
            Spawn((
                // Checkbox outer
                Node {
                    display: Display::Flex,
                    width: px(16),
                    height: px(16),
                    border: UiRect::all(px(2)),
                    border_radius: BorderRadius::all(px(3)),
                    ..default()
                },
                BorderColor::all(CHECKBOX_OUTLINE), // Border color for the checkbox
                children![
                    // Checkbox inner
                    (
                        Node {
                            display: Display::Flex,
                            width: px(8),
                            height: px(8),
                            position_type: PositionType::Absolute,
                            left: px(2),
                            top: px(2),
                            ..default()
                        },
                        BackgroundColor(Srgba::NONE.into()),
                    ),
                ],
            )),
            Spawn((
                Text::new(caption),
                TextFont {
                    font: asset_server.load("fonts/FiraSans-Bold.ttf").into(),
                    font_size: FontSize::Px(20.0),
                    ..default()
                },
            )),
        )),
    )
}

fn checkbox_on_interaction<E: EventPattern<Event: EntityEvent>>(
    event: On<E>,
    checkboxes: Query<
        (&Hovered, Has<InteractionDisabled>, Has<Checked>, &Children),
        With<DemoCheckbox>,
    >,
    mut borders: Query<(&mut BorderColor, &mut Children), Without<DemoCheckbox>>,
    mut marks: Query<&mut BackgroundColor, (Without<DemoCheckbox>, Without<Children>)>,
) {
    if let Ok((hovered, disabled, checked, children)) = checkboxes.get(event.event_target()) {
        let hovered = hovered.get();
        // These "removal event checks" exist because the `Remove` event is triggered _before_ the component is actually
        // removed, meaning it still shows up in the query. We're investigating the best way to improve this scenario.
        let checked = checked && !(E::Event::is::<RemoveEvent>() && E::Components::is::<Checked>());
        let disabled = disabled
            && !(E::Event::is::<RemoveEvent>() && E::Components::is::<InteractionDisabled>());

        let Some(border_id) = children.first() else {
            return;
        };

        let Ok((mut border_color, border_children)) = borders.get_mut(*border_id) else {
            return;
        };

        let Some(mark_id) = border_children.first() else {
            warn!("Checkbox does not have a mark entity.");
            return;
        };

        let Ok(mut mark_bg) = marks.get_mut(*mark_id) else {
            warn!("Checkbox mark entity lacking a background color.");
            return;
        };

        let color: Color = if disabled {
            // If the checkbox is disabled, use a lighter color
            CHECKBOX_OUTLINE.with_alpha(0.2)
        } else if hovered {
            // If hovering, use a lighter color
            CHECKBOX_OUTLINE.lighter(0.2)
        } else {
            // Default color for the checkbox
            CHECKBOX_OUTLINE
        };

        // Update the background color of the check mark
        border_color.set_all(color);

        let mark_color: Color = match (disabled, checked) {
            (true, true) => CHECKBOX_CHECK.with_alpha(0.5),
            (false, true) => CHECKBOX_CHECK,
            (_, false) => Srgba::NONE.into(),
        };

        if mark_bg.0 != mark_color {
            // Update the color of the check mark
            mark_bg.0 = mark_color;
        }
    }
}

Additional examples can be found in:

• examples/ui/ui_drag_and_drop.rs

pub fn is_fully_transparent(&self) -> bool

Check if all contained border colors are transparent

Trait Implementations

impl Clone for BorderColor

fn clone(&self) -> BorderColor

Returns a duplicate of the value.

fn clone_from(&mut self, source: &Self)

Performs copy-assignment from source.

impl Component for BorderColor

where BorderColor: Send + Sync + 'static,

const STORAGE_TYPE: StorageType = bevy_ecs::component::StorageType::Table

A constant indicating the storage type used for this component.

type Mutability = Mutable

A marker type to assist Bevy with determining if this component is mutable, or immutable. Mutable components will have Component<Mutability = Mutable>, while immutable components will instead have Component<Mutability = Immutable>.

fn register_required_components( _requiree: ComponentId, required_components: &mut RequiredComponentsRegistrator<'_, '_>, )

Registers required components.

fn clone_behavior() -> ComponentCloneBehavior

Called when registering this component, allowing to override clone function (or disable cloning altogether) for this component.

fn relationship_accessor() -> Option<ComponentRelationshipAccessor<BorderColor>>

Returns ComponentRelationshipAccessor required for working with relationships in dynamic contexts.

fn on_add() -> Option<for<'w> fn(DeferredWorld<'w>, HookContext)>

Gets the on_add ComponentHook for this Component if one is defined.

fn on_insert() -> Option<for<'w> fn(DeferredWorld<'w>, HookContext)>

Gets the on_insert ComponentHook for this Component if one is defined.

fn on_discard() -> Option<for<'w> fn(DeferredWorld<'w>, HookContext)>

Gets the on_discard ComponentHook for this Component if one is defined.

fn on_remove() -> Option<for<'w> fn(DeferredWorld<'w>, HookContext)>

Gets the on_remove ComponentHook for this Component if one is defined.

fn on_despawn() -> Option<for<'w> fn(DeferredWorld<'w>, HookContext)>

Gets the on_despawn ComponentHook for this Component if one is defined.

fn map_entities<E>(_this: &mut Self, _mapper: &mut E)

where E: EntityMapper,

Maps the entities on this component using the given EntityMapper. This is used to remap entities in contexts like scenes and entity cloning. When deriving Component, this is populated by annotating fields containing entities with #[entities]

const HAS_SUMMARY_TICK: bool = false

Set this constant to true if the component should track a summary tick.

impl Copy for BorderColor

impl Debug for BorderColor

fn fmt(&self, f: &mut Formatter<'_>) -> Result<(), Error>

Formats the value using the given formatter.

impl Default for BorderColor

fn default() -> BorderColor

Returns the “default value” for a type.

impl<'de> Deserialize<'de> for BorderColor

fn deserialize<__D>( __deserializer: __D, ) -> Result<BorderColor, <__D as Deserializer<'de>>::Error>

where __D: Deserializer<'de>,

Deserialize this value from the given Serde deserializer.

impl<T> From<T> for BorderColor

where T: Into<Color>,

fn from(color: T) -> BorderColor

Converts to this type from the input type.

impl FromArg for BorderColor

type This<'from_arg> = BorderColor

The type to convert into.

fn from_arg( arg: Arg<'_>, ) -> Result<<BorderColor as FromArg>::This<'_>, ArgError>

Creates an item from an argument.

impl FromReflect for BorderColor

fn from_reflect(reflect: &(dyn PartialReflect + 'static)) -> Option<BorderColor>

Constructs a concrete instance of Self from a reflected value.

fn take_from_reflect( reflect: Box<dyn PartialReflect>, ) -> Result<Self, Box<dyn PartialReflect>>

Attempts to downcast the given value to Self using, constructing the value using from_reflect if that fails.

impl GetOwnership for BorderColor

fn ownership() -> Ownership

Returns the ownership of Self.

impl GetTypeRegistration for BorderColor

fn get_type_registration() -> TypeRegistration

Returns the default TypeRegistration for this type.

fn register_type_dependencies(registry: &mut TypeRegistry)

Registers other types needed by this type.

impl IntoReturn for BorderColor

fn into_return<'into_return>(self) -> Return<'into_return>

where BorderColor: 'into_return,

Converts Self into a Return value.

impl PartialEq for BorderColor

fn eq(&self, other: &BorderColor) -> bool

Equality operator ==.

fn ne(&self, other: &Rhs) -> bool

Inequality operator !=.

impl PartialReflect for BorderColor

fn get_represented_type_info(&self) -> Option<&'static TypeInfo>

Returns the TypeInfo of the type represented by this value.

fn try_apply( &mut self, value: &(dyn PartialReflect + 'static), ) -> Result<(), ApplyError>

Tries to apply a reflected value to this value.

fn reflect_kind(&self) -> ReflectKind

Returns a zero-sized enumeration of “kinds” of type.

fn reflect_ref(&self) -> ReflectRef<'_>

Returns an immutable enumeration of “kinds” of type.

fn reflect_mut(&mut self) -> ReflectMut<'_>

Returns a mutable enumeration of “kinds” of type.

fn reflect_owned(self: Box<BorderColor>) -> ReflectOwned

Returns an owned enumeration of “kinds” of type.

fn try_into_reflect( self: Box<BorderColor>, ) -> Result<Box<dyn Reflect>, Box<dyn PartialReflect>>

Attempts to cast this type to a boxed, fully-reflected value.

fn try_as_reflect(&self) -> Option<&(dyn Reflect + 'static)>

Attempts to cast this type to a fully-reflected value.

fn try_as_reflect_mut(&mut self) -> Option<&mut (dyn Reflect + 'static)>

Attempts to cast this type to a mutable, fully-reflected value.

fn into_partial_reflect(self: Box<BorderColor>) -> Box<dyn PartialReflect>

Casts this type to a boxed, reflected value.

fn as_partial_reflect(&self) -> &(dyn PartialReflect + 'static)

Casts this type to a reflected value.

fn as_partial_reflect_mut(&mut self) -> &mut (dyn PartialReflect + 'static)

Casts this type to a mutable, reflected value.

fn reflect_partial_eq( &self, value: &(dyn PartialReflect + 'static), ) -> Option<bool>

Returns a “partial equality” comparison result.

fn reflect_partial_cmp( &self, value: &(dyn PartialReflect + 'static), ) -> Option<Ordering>

Returns a “partial comparison” result.

fn debug(&self, f: &mut Formatter<'_>) -> Result<(), Error>

Debug formatter for the value.

fn reflect_clone(&self) -> Result<Box<dyn Reflect>, ReflectCloneError>

Attempts to clone Self using reflection.

fn apply(&mut self, value: &(dyn PartialReflect + 'static))

Applies a reflected value to this value.

fn to_dynamic(&self) -> Result<Box<dyn PartialReflect>, ReflectCloneError>

Converts this reflected value into its dynamic representation based on its kind.

fn reflect_clone_and_take<T>(&self) -> Result<T, ReflectCloneError>

where T: 'static, Self: Sized + TypePath,

For a type implementing PartialReflect, combines reflect_clone and take in a useful fashion, automatically constructing an appropriate ReflectCloneError if the downcast fails.

fn reflect_hash(&self) -> Option<u64>

Returns a hash of the value (which includes the type).

fn is_dynamic(&self) -> bool

Indicates whether or not this type is a dynamic type.

impl Reflect for BorderColor

fn into_any(self: Box<BorderColor>) -> Box<dyn Any>

Returns the value as a Box<dyn Any>.

fn as_any(&self) -> &(dyn Any + 'static)

Returns the value as a &dyn Any.

fn as_any_mut(&mut self) -> &mut (dyn Any + 'static)

Returns the value as a &mut dyn Any.

fn into_reflect(self: Box<BorderColor>) -> Box<dyn Reflect>

Casts this type to a boxed, fully-reflected value.

fn as_reflect(&self) -> &(dyn Reflect + 'static)

Casts this type to a fully-reflected value.

fn as_reflect_mut(&mut self) -> &mut (dyn Reflect + 'static)

Casts this type to a mutable, fully-reflected value.

fn set(&mut self, value: Box<dyn Reflect>) -> Result<(), Box<dyn Reflect>>

Performs a type-checked assignment of a reflected value to this value.

impl Serialize for BorderColor

fn serialize<__S>( &self, __serializer: __S, ) -> Result<<__S as Serializer>::Ok, <__S as Serializer>::Error>

where __S: Serializer,

Serialize this value into the given Serde serializer.

impl Struct for BorderColor

fn field(&self, name: &str) -> Option<&(dyn PartialReflect + 'static)>

Gets a reference to the value of the field named name as a &dyn PartialReflect.

fn field_mut( &mut self, name: &str, ) -> Option<&mut (dyn PartialReflect + 'static)>

Gets a mutable reference to the value of the field named name as a &mut dyn PartialReflect.

fn field_at(&self, index: usize) -> Option<&(dyn PartialReflect + 'static)>

Gets a reference to the value of the field with index index as a &dyn PartialReflect.

fn field_at_mut( &mut self, index: usize, ) -> Option<&mut (dyn PartialReflect + 'static)>

Gets a mutable reference to the value of the field with index index as a &mut dyn PartialReflect.

fn name_at(&self, index: usize) -> Option<&str>

Gets the name of the field with index index.

fn index_of_name(&self, name: &str) -> Option<usize>

Gets the index of the field with the given name.

fn field_len(&self) -> usize

Returns the number of fields in the struct.

fn iter_fields(&self) -> FieldIter<'_>

Returns an iterator over the values of the reflectable fields for this struct.

fn to_dynamic_struct(&self) -> Result<DynamicStruct, ReflectCloneError>

Creates a new DynamicStruct from this struct.

fn get_represented_struct_info(&self) -> Option<&'static StructInfo>

Will return None if TypeInfo is not available.

impl StructuralPartialEq for BorderColor

impl TypePath for BorderColor

fn type_path() -> &'static str

Returns the fully qualified path of the underlying type.

fn short_type_path() -> &'static str

Returns a short, pretty-print enabled path to the type.

fn type_ident() -> Option<&'static str>

Returns the name of the type, or None if it is anonymous.

fn crate_name() -> Option<&'static str>

Returns the name of the crate the type is in, or None if it is anonymous.

fn module_path() -> Option<&'static str>

Returns the path to the module the type is in, or None if it is anonymous.

impl Typed for BorderColor

fn type_info() -> &'static TypeInfo

Returns the compile-time info for the underlying type.