Struct BorderRadius

Component

pub struct BorderRadius {
    pub top_left: Val,
    pub top_right: Val,
    pub bottom_left: Val,
    pub bottom_right: Val,
}

Used to add rounded corners to a UI node. You can set a UI node to have uniformly rounded corners or specify different radii for each corner. If a given radius exceeds half the length of the smallest dimension between the node’s height or width, the radius will calculated as half the smallest dimension.

Elliptical nodes are not supported yet. Percentage values are based on the node’s smallest dimension, either width or height.

Example

fn setup_ui(mut commands: Commands) {
    commands.spawn((
        Node {
            width: Val::Px(100.),
            height: Val::Px(100.),
            border: UiRect::all(Val::Px(2.)),
            ..Default::default()
        },
        BackgroundColor(BLUE.into()),
        BorderRadius::new(
            // top left
            Val::Px(10.),
            // top right
            Val::Px(20.),
            // bottom right
            Val::Px(30.),
            // bottom left
            Val::Px(40.),
        ),
    ));
}

https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius

Fields

top_left: Val

top_right: Val

bottom_left: Val

bottom_right: Val

Implementations

impl BorderRadius

pub const DEFAULT: BorderRadius = Self::ZERO

pub const ZERO: BorderRadius

Zero curvature. All the corners will be right-angled.

pub const MAX: BorderRadius

Maximum curvature. The UI Node will take a capsule shape or circular if width and height are equal.

pub const fn all(radius: Val) -> BorderRadius

Set all four corners to the same curvature.

Examples found in repository

examples/3d/clustered_decals.rs (line 295)

fn spawn_drag_button<'a>(
    commands: &'a mut ChildSpawnerCommands,
    label: &str,
) -> EntityCommands<'a> {
    let mut kid = commands.spawn(Node {
        border: BUTTON_BORDER,
        justify_content: JustifyContent::Center,
        align_items: AlignItems::Center,
        padding: BUTTON_PADDING,
        ..default()
    });
    kid.insert((
        Button,
        BackgroundColor(Color::BLACK),
        BorderRadius::all(BUTTON_BORDER_RADIUS_SIZE),
        BUTTON_BORDER_COLOR,
    ))
    .with_children(|parent| {
        widgets::spawn_ui_text(parent, label, Color::WHITE);
    });
    kid
}

examples/ui/ui_material.rs (line 51)

fn setup(
    mut commands: Commands,
    mut ui_materials: ResMut<Assets<CustomUiMaterial>>,
    asset_server: Res<AssetServer>,
) {
    // Camera so we can see UI
    commands.spawn(Camera2d);

    commands
        .spawn(Node {
            width: Val::Percent(100.0),
            height: Val::Percent(100.0),
            align_items: AlignItems::Center,
            justify_content: JustifyContent::Center,
            ..default()
        })
        .with_children(|parent| {
            let banner_scale_factor = 0.5;
            parent.spawn((
                Node {
                    position_type: PositionType::Absolute,
                    width: Val::Px(905.0 * banner_scale_factor),
                    height: Val::Px(363.0 * banner_scale_factor),
                    border: UiRect::all(Val::Px(20.)),
                    ..default()
                },
                MaterialNode(ui_materials.add(CustomUiMaterial {
                    color: LinearRgba::WHITE.to_f32_array().into(),
                    slider: Vec4::splat(0.5),
                    color_texture: asset_server.load("branding/banner.png"),
                    border_color: LinearRgba::WHITE.to_f32_array().into(),
                })),
                BorderRadius::all(Val::Px(20.)),
                // UI material nodes can have outlines and shadows like any other UI node
                Outline {
                    width: Val::Px(2.),
                    offset: Val::Px(100.),
                    color: DARK_BLUE.into(),
                },
            ));
        });
}

examples/animation/animation_masks.rs (line 259)

fn add_mask_group_control(
    parent: &mut ChildSpawnerCommands,
    label: &str,
    width: Val,
    mask_group_id: u32,
) {
    let button_text_style = (
        TextFont {
            font_size: 14.0,
            ..default()
        },
        TextColor::WHITE,
    );
    let selected_button_text_style = (button_text_style.0.clone(), TextColor::BLACK);
    let label_text_style = (
        button_text_style.0.clone(),
        TextColor(Color::Srgba(LIGHT_GRAY)),
    );

    parent
        .spawn((
            Node {
                border: UiRect::all(Val::Px(1.0)),
                width,
                flex_direction: FlexDirection::Column,
                justify_content: JustifyContent::Center,
                align_items: AlignItems::Center,
                padding: UiRect::ZERO,
                margin: UiRect::ZERO,
                ..default()
            },
            BorderColor(Color::WHITE),
            BorderRadius::all(Val::Px(3.0)),
            BackgroundColor(Color::BLACK),
        ))
        .with_children(|builder| {
            builder
                .spawn((
                    Node {
                        border: UiRect::ZERO,
                        width: Val::Percent(100.0),
                        justify_content: JustifyContent::Center,
                        align_items: AlignItems::Center,
                        padding: UiRect::ZERO,
                        margin: UiRect::ZERO,
                        ..default()
                    },
                    BackgroundColor(Color::BLACK),
                ))
                .with_child((
                    Text::new(label),
                    label_text_style.clone(),
                    Node {
                        margin: UiRect::vertical(Val::Px(3.0)),
                        ..default()
                    },
                ));

            builder
                .spawn((
                    Node {
                        width: Val::Percent(100.0),
                        flex_direction: FlexDirection::Row,
                        justify_content: JustifyContent::Center,
                        align_items: AlignItems::Center,
                        border: UiRect::top(Val::Px(1.0)),
                        ..default()
                    },
                    BorderColor(Color::WHITE),
                ))
                .with_children(|builder| {
                    for (index, label) in [
                        AnimationLabel::Run,
                        AnimationLabel::Walk,
                        AnimationLabel::Idle,
                        AnimationLabel::Off,
                    ]
                    .iter()
                    .enumerate()
                    {
                        builder
                            .spawn((
                                Button,
                                BackgroundColor(if index > 0 {
                                    Color::BLACK
                                } else {
                                    Color::WHITE
                                }),
                                Node {
                                    flex_grow: 1.0,
                                    border: if index > 0 {
                                        UiRect::left(Val::Px(1.0))
                                    } else {
                                        UiRect::ZERO
                                    },
                                    ..default()
                                },
                                BorderColor(Color::WHITE),
                                AnimationControl {
                                    group_id: mask_group_id,
                                    label: *label,
                                },
                            ))
                            .with_child((
                                Text(format!("{:?}", label)),
                                if index > 0 {
                                    button_text_style.clone()
                                } else {
                                    selected_button_text_style.clone()
                                },
                                TextLayout::new_with_justify(JustifyText::Center),
                                Node {
                                    flex_grow: 1.0,
                                    margin: UiRect::vertical(Val::Px(3.0)),
                                    ..default()
                                },
                            ));
                    }
                });
        });
}

examples/ui/directional_navigation.rs (line 180)

fn setup_ui(
    mut commands: Commands,
    mut directional_nav_map: ResMut<DirectionalNavigationMap>,
    mut input_focus: ResMut<InputFocus>,
) {
    const N_ROWS: u16 = 5;
    const N_COLS: u16 = 3;

    // Rendering UI elements requires a camera
    commands.spawn(Camera2d);

    // Create a full-screen background node
    let root_node = commands
        .spawn(Node {
            width: Val::Percent(100.0),
            height: Val::Percent(100.0),
            ..default()
        })
        .id();

    // Add instruction to the left of the grid
    let instructions = commands
        .spawn((
            Text::new("Use arrow keys or D-pad to navigate. \
            Click the buttons, or press Enter / the South gamepad button to interact with the focused button."),
            Node {
                width: Val::Px(300.0),
                justify_content: JustifyContent::Center,
                align_items: AlignItems::Center,
                margin: UiRect::all(Val::Px(12.0)),
                ..default()
            },
        ))
        .id();

    // Set up the root entity to hold the grid
    let grid_root_entity = commands
        .spawn(Node {
            display: Display::Grid,
            // Allow the grid to take up the full height and the rest of the width of the window
            width: Val::Percent(100.),
            height: Val::Percent(100.),
            // Set the number of rows and columns in the grid
            // allowing the grid to automatically size the cells
            grid_template_columns: RepeatedGridTrack::auto(N_COLS),
            grid_template_rows: RepeatedGridTrack::auto(N_ROWS),
            ..default()
        })
        .id();

    // Add the instructions and grid to the root node
    commands
        .entity(root_node)
        .add_children(&[instructions, grid_root_entity]);

    let mut button_entities: HashMap<(u16, u16), Entity> = HashMap::default();
    for row in 0..N_ROWS {
        for col in 0..N_COLS {
            let button_name = format!("Button {}-{}", row, col);

            let button_entity = commands
                .spawn((
                    Button,
                    Node {
                        width: Val::Px(200.0),
                        height: Val::Px(120.0),
                        // Add a border so we can show which element is focused
                        border: UiRect::all(Val::Px(4.0)),
                        // Center the button's text label
                        justify_content: JustifyContent::Center,
                        align_items: AlignItems::Center,
                        // Center the button within the grid cell
                        align_self: AlignSelf::Center,
                        justify_self: JustifySelf::Center,
                        ..default()
                    },
                    ResetTimer::default(),
                    BorderRadius::all(Val::Px(16.0)),
                    BackgroundColor::from(NORMAL_BUTTON),
                    Name::new(button_name.clone()),
                ))
                // Add a text element to the button
                .with_child((
                    Text::new(button_name),
                    // And center the text if it flows onto multiple lines
                    TextLayout {
                        justify: JustifyText::Center,
                        ..default()
                    },
                ))
                .id();

            // Add the button to the grid
            commands.entity(grid_root_entity).add_child(button_entity);

            // Keep track of the button entities so we can set up our navigation graph
            button_entities.insert((row, col), button_entity);
        }
    }

    // Connect all of the buttons in the same row to each other,
    // looping around when the edge is reached.
    for row in 0..N_ROWS {
        let entities_in_row: Vec<Entity> = (0..N_COLS)
            .map(|col| button_entities.get(&(row, col)).unwrap())
            .copied()
            .collect();
        directional_nav_map.add_looping_edges(&entities_in_row, CompassOctant::East);
    }

    // Connect all of the buttons in the same column to each other,
    // but don't loop around when the edge is reached.
    // While looping is a very reasonable choice, we're not doing it here to demonstrate the different options.
    for col in 0..N_COLS {
        let entities_in_column: Vec<Entity> = (0..N_ROWS)
            .map(|row| button_entities.get(&(row, col)).unwrap())
            .copied()
            .collect();

        directional_nav_map.add_edges(&entities_in_column, CompassOctant::South);
    }

    // When changing scenes, remember to set an initial focus!
    let top_left_entity = *button_entities.get(&(0, 0)).unwrap();
    input_focus.set(top_left_entity);
}

examples/ui/box_shadow.rs (line 148)

fn setup(mut commands: Commands) {
    // `from_env` panics on the web
    #[cfg(not(target_arch = "wasm32"))]
    let args: Args = argh::from_env();
    #[cfg(target_arch = "wasm32")]
    let args = Args::from_args(&[], &[]).unwrap();

    // ui camera
    commands.spawn((Camera2d, BoxShadowSamples(args.samples)));

    commands
        .spawn((
            Node {
                width: Val::Percent(100.0),
                height: Val::Percent(100.0),
                padding: UiRect::all(Val::Px(30.)),
                column_gap: Val::Px(30.),
                flex_wrap: FlexWrap::Wrap,
                ..default()
            },
            BackgroundColor(DEEP_SKY_BLUE.into()),
        ))
        .with_children(|commands| {
            let example_nodes = [
                (
                    Vec2::splat(50.),
                    Vec2::ZERO,
                    10.,
                    0.,
                    BorderRadius::bottom_right(Val::Px(10.)),
                ),
                (Vec2::new(50., 25.), Vec2::ZERO, 10., 0., BorderRadius::ZERO),
                (Vec2::splat(50.), Vec2::ZERO, 10., 0., BorderRadius::MAX),
                (Vec2::new(100., 25.), Vec2::ZERO, 10., 0., BorderRadius::MAX),
                (
                    Vec2::splat(50.),
                    Vec2::ZERO,
                    10.,
                    0.,
                    BorderRadius::bottom_right(Val::Px(10.)),
                ),
                (Vec2::new(50., 25.), Vec2::ZERO, 0., 10., BorderRadius::ZERO),
                (
                    Vec2::splat(50.),
                    Vec2::ZERO,
                    0.,
                    10.,
                    BorderRadius::bottom_right(Val::Px(10.)),
                ),
                (Vec2::new(100., 25.), Vec2::ZERO, 0., 10., BorderRadius::MAX),
                (
                    Vec2::splat(50.),
                    Vec2::splat(25.),
                    0.,
                    0.,
                    BorderRadius::ZERO,
                ),
                (
                    Vec2::new(50., 25.),
                    Vec2::splat(25.),
                    0.,
                    0.,
                    BorderRadius::ZERO,
                ),
                (
                    Vec2::splat(50.),
                    Vec2::splat(10.),
                    0.,
                    0.,
                    BorderRadius::bottom_right(Val::Px(10.)),
                ),
                (
                    Vec2::splat(50.),
                    Vec2::splat(25.),
                    0.,
                    10.,
                    BorderRadius::ZERO,
                ),
                (
                    Vec2::new(50., 25.),
                    Vec2::splat(25.),
                    0.,
                    10.,
                    BorderRadius::ZERO,
                ),
                (
                    Vec2::splat(50.),
                    Vec2::splat(10.),
                    0.,
                    10.,
                    BorderRadius::bottom_right(Val::Px(10.)),
                ),
                (
                    Vec2::splat(50.),
                    Vec2::splat(10.),
                    0.,
                    3.,
                    BorderRadius::ZERO,
                ),
                (
                    Vec2::new(50., 25.),
                    Vec2::splat(10.),
                    0.,
                    3.,
                    BorderRadius::ZERO,
                ),
                (
                    Vec2::splat(50.),
                    Vec2::splat(10.),
                    0.,
                    3.,
                    BorderRadius::bottom_right(Val::Px(10.)),
                ),
                (
                    Vec2::splat(50.),
                    Vec2::splat(10.),
                    0.,
                    3.,
                    BorderRadius::all(Val::Px(20.)),
                ),
                (
                    Vec2::new(50., 25.),
                    Vec2::splat(10.),
                    0.,
                    3.,
                    BorderRadius::all(Val::Px(20.)),
                ),
                (
                    Vec2::new(25., 50.),
                    Vec2::splat(10.),
                    0.,
                    3.,
                    BorderRadius::MAX,
                ),
                (
                    Vec2::splat(50.),
                    Vec2::splat(10.),
                    0.,
                    10.,
                    BorderRadius::all(Val::Px(20.)),
                ),
                (
                    Vec2::new(50., 25.),
                    Vec2::splat(10.),
                    0.,
                    10.,
                    BorderRadius::all(Val::Px(20.)),
                ),
                (
                    Vec2::new(25., 50.),
                    Vec2::splat(10.),
                    0.,
                    10.,
                    BorderRadius::MAX,
                ),
            ];

            for (size, offset, spread, blur, border_radius) in example_nodes {
                commands.spawn(box_shadow_node_bundle(
                    size,
                    offset,
                    spread,
                    blur,
                    border_radius,
                ));
            }

            // Demonstrate multiple shadows on one node
            commands.spawn((
                Node {
                    width: Val::Px(40.),
                    height: Val::Px(40.),
                    border: UiRect::all(Val::Px(4.)),
                    ..default()
                },
                BorderColor(LIGHT_SKY_BLUE.into()),
                BorderRadius::all(Val::Px(20.)),
                BackgroundColor(DEEP_SKY_BLUE.into()),
                BoxShadow(vec![
                    ShadowStyle {
                        color: RED.with_alpha(0.7).into(),
                        x_offset: Val::Px(-20.),
                        y_offset: Val::Px(-5.),
                        spread_radius: Val::Percent(10.),
                        blur_radius: Val::Px(3.),
                    },
                    ShadowStyle {
                        color: BLUE.with_alpha(0.7).into(),
                        x_offset: Val::Px(-5.),
                        y_offset: Val::Px(-20.),
                        spread_radius: Val::Percent(10.),
                        blur_radius: Val::Px(3.),
                    },
                    ShadowStyle {
                        color: YELLOW.with_alpha(0.7).into(),
                        x_offset: Val::Px(20.),
                        y_offset: Val::Px(5.),
                        spread_radius: Val::Percent(10.),
                        blur_radius: Val::Px(3.),
                    },
                    ShadowStyle {
                        color: GREEN.with_alpha(0.7).into(),
                        x_offset: Val::Px(5.),
                        y_offset: Val::Px(20.),
                        spread_radius: Val::Percent(10.),
                        blur_radius: Val::Px(3.),
                    },
                ]),
            ));
        });
}

examples/testbed/full_ui.rs (line 211)

fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
    // Camera
    commands.spawn((Camera2d, IsDefaultUiCamera, BoxShadowSamples(6)));

    // root node
    commands
        .spawn(Node {
            width: Val::Percent(100.0),
            height: Val::Percent(100.0),
            justify_content: JustifyContent::SpaceBetween,
            ..default()
        })
        .insert(Pickable::IGNORE)
        .with_children(|parent| {
            // left vertical fill (border)
            parent
                .spawn((
                    Node {
                        width: Val::Px(200.),
                        border: UiRect::all(Val::Px(2.)),
                        ..default()
                    },
                    BackgroundColor(Color::srgb(0.65, 0.65, 0.65)),
                ))
                .with_children(|parent| {
                    // left vertical fill (content)
                    parent
                        .spawn((
                            Node {
                                width: Val::Percent(100.),
                                flex_direction: FlexDirection::Column,
                                padding: UiRect::all(Val::Px(5.)),
                                row_gap: Val::Px(5.),
                                ..default()
                            },
                            BackgroundColor(Color::srgb(0.15, 0.15, 0.15)),
                            Visibility::Visible,
                        ))
                        .with_children(|parent| {
                            // text
                            parent.spawn((
                                Text::new("Text Example"),
                                TextFont {
                                    font: asset_server.load("fonts/FiraSans-Bold.ttf"),
                                    font_size: 25.0,
                                    ..default()
                                },
                                // Because this is a distinct label widget and
                                // not button/list item text, this is necessary
                                // for accessibility to treat the text accordingly.
                                Label,
                            ));

                            #[cfg(feature = "bevy_ui_debug")]
                            {
                                // Debug overlay text
                                parent.spawn((
                                    Text::new("Press Space to toggle debug outlines."),
                                    TextFont {
                                        font: asset_server.load("fonts/FiraSans-Bold.ttf"),
                                        ..default()
                                    },
                                    Label,
                                ));

                                parent.spawn((
                                    Text::new("V: toggle UI root's visibility"),
                                    TextFont {
                                        font: asset_server.load("fonts/FiraSans-Bold.ttf"),
                                        font_size: 12.,
                                        ..default()
                                    },
                                    Label,
                                ));

                                parent.spawn((
                                    Text::new("S: toggle outlines for hidden nodes"),
                                    TextFont {
                                        font: asset_server.load("fonts/FiraSans-Bold.ttf"),
                                        font_size: 12.,
                                        ..default()
                                    },
                                    Label,
                                ));
                                parent.spawn((
                                    Text::new("C: toggle outlines for clipped nodes"),
                                    TextFont {
                                        font: asset_server.load("fonts/FiraSans-Bold.ttf"),
                                        font_size: 12.,
                                        ..default()
                                    },
                                    Label,
                                ));
                            }
                            #[cfg(not(feature = "bevy_ui_debug"))]
                            parent.spawn((
                                Text::new("Try enabling feature \"bevy_ui_debug\"."),
                                TextFont {
                                    font: asset_server.load("fonts/FiraSans-Bold.ttf"),
                                    ..default()
                                },
                                Label,
                            ));
                        });
                });
            // right vertical fill
            parent
                .spawn(Node {
                    flex_direction: FlexDirection::Column,
                    justify_content: JustifyContent::Center,
                    align_items: AlignItems::Center,
                    width: Val::Px(200.),
                    ..default()
                })
                .with_children(|parent| {
                    // Title
                    parent.spawn((
                        Text::new("Scrolling list"),
                        TextFont {
                            font: asset_server.load("fonts/FiraSans-Bold.ttf"),
                            font_size: 21.,
                            ..default()
                        },
                        Label,
                    ));
                    // Scrolling list
                    parent
                        .spawn((
                            Node {
                                flex_direction: FlexDirection::Column,
                                align_self: AlignSelf::Stretch,
                                height: Val::Percent(50.),
                                overflow: Overflow::scroll_y(),
                                ..default()
                            },
                            BackgroundColor(Color::srgb(0.10, 0.10, 0.10)),
                        ))
                        .with_children(|parent| {
                            // List items
                            for i in 0..25 {
                                parent
                                    .spawn((
                                        Text(format!("Item {i}")),
                                        TextFont {
                                            font: asset_server.load("fonts/FiraSans-Bold.ttf"),
                                            ..default()
                                        },
                                        Label,
                                        AccessibilityNode(Accessible::new(Role::ListItem)),
                                    ))
                                    .insert(Pickable {
                                        should_block_lower: false,
                                        ..default()
                                    });
                            }
                        });
                });

            parent
                .spawn(Node {
                    left: Val::Px(210.),
                    bottom: Val::Px(10.),
                    position_type: PositionType::Absolute,
                    ..default()
                })
                .with_children(|parent| {
                    parent
                        .spawn((
                            Node {
                                width: Val::Px(200.0),
                                height: Val::Px(200.0),
                                border: UiRect::all(Val::Px(20.)),
                                flex_direction: FlexDirection::Column,
                                justify_content: JustifyContent::Center,
                                ..default()
                            },
                            BorderColor(LIME.into()),
                            BackgroundColor(Color::srgb(0.8, 0.8, 1.)),
                        ))
                        .with_children(|parent| {
                            parent.spawn((
                                ImageNode::new(asset_server.load("branding/bevy_logo_light.png")),
                                // Uses the transform to rotate the logo image by 45 degrees
                                Transform::from_rotation(Quat::from_rotation_z(0.25 * PI)),
                                BorderRadius::all(Val::Px(10.)),
                                Outline {
                                    width: Val::Px(2.),
                                    offset: Val::Px(4.),
                                    color: DARK_GRAY.into(),
                                },
                            ));
                        });
                });

            let shadow_style = ShadowStyle {
                color: Color::BLACK.with_alpha(0.5),
                blur_radius: Val::Px(2.),
                x_offset: Val::Px(10.),
                y_offset: Val::Px(10.),
                ..default()
            };

            // render order test: reddest in the back, whitest in the front (flex center)
            parent
                .spawn(Node {
                    width: Val::Percent(100.0),
                    height: Val::Percent(100.0),
                    position_type: PositionType::Absolute,
                    align_items: AlignItems::Center,
                    justify_content: JustifyContent::Center,
                    ..default()
                })
                .insert(Pickable::IGNORE)
                .with_children(|parent| {
                    parent
                        .spawn((
                            Node {
                                width: Val::Px(100.0),
                                height: Val::Px(100.0),
                                ..default()
                            },
                            BackgroundColor(Color::srgb(1.0, 0.0, 0.)),
                            BoxShadow::from(shadow_style),
                        ))
                        .with_children(|parent| {
                            parent.spawn((
                                Node {
                                    // Take the size of the parent node.
                                    width: Val::Percent(100.0),
                                    height: Val::Percent(100.0),
                                    position_type: PositionType::Absolute,
                                    left: Val::Px(20.),
                                    bottom: Val::Px(20.),
                                    ..default()
                                },
                                BackgroundColor(Color::srgb(1.0, 0.3, 0.3)),
                                BoxShadow::from(shadow_style),
                            ));
                            parent.spawn((
                                Node {
                                    width: Val::Percent(100.0),
                                    height: Val::Percent(100.0),
                                    position_type: PositionType::Absolute,
                                    left: Val::Px(40.),
                                    bottom: Val::Px(40.),
                                    ..default()
                                },
                                BackgroundColor(Color::srgb(1.0, 0.5, 0.5)),
                                BoxShadow::from(shadow_style),
                            ));
                            parent.spawn((
                                Node {
                                    width: Val::Percent(100.0),
                                    height: Val::Percent(100.0),
                                    position_type: PositionType::Absolute,
                                    left: Val::Px(60.),
                                    bottom: Val::Px(60.),
                                    ..default()
                                },
                                BackgroundColor(Color::srgb(0.0, 0.7, 0.7)),
                                BoxShadow::from(shadow_style),
                            ));
                            // alpha test
                            parent.spawn((
                                Node {
                                    width: Val::Percent(100.0),
                                    height: Val::Percent(100.0),
                                    position_type: PositionType::Absolute,
                                    left: Val::Px(80.),
                                    bottom: Val::Px(80.),
                                    ..default()
                                },
                                BackgroundColor(Color::srgba(1.0, 0.9, 0.9, 0.4)),
                                BoxShadow::from(ShadowStyle {
                                    color: Color::BLACK.with_alpha(0.3),
                                    ..shadow_style
                                }),
                            ));
                        });
                });
            // bevy logo (flex center)
            parent
                .spawn(Node {
                    width: Val::Percent(100.0),
                    position_type: PositionType::Absolute,
                    justify_content: JustifyContent::Center,
                    align_items: AlignItems::FlexStart,
                    ..default()
                })
                .with_children(|parent| {
                    // bevy logo (image)
                    parent
                        .spawn((
                            ImageNode::new(asset_server.load("branding/bevy_logo_dark_big.png"))
                                .with_mode(NodeImageMode::Stretch),
                            Node {
                                width: Val::Px(500.0),
                                height: Val::Px(125.0),
                                margin: UiRect::top(Val::VMin(5.)),
                                ..default()
                            },
                        ))
                        .with_children(|parent| {
                            // alt text
                            // This UI node takes up no space in the layout and the `Text` component is used by the accessibility module
                            // and is not rendered.
                            parent.spawn((
                                Node {
                                    display: Display::None,
                                    ..default()
                                },
                                Text::new("Bevy logo"),
                            ));
                        });
                });

            // four bevy icons demonstrating image flipping
            parent
                .spawn(Node {
                    width: Val::Percent(100.0),
                    height: Val::Percent(100.0),
                    position_type: PositionType::Absolute,
                    justify_content: JustifyContent::Center,
                    align_items: AlignItems::FlexEnd,
                    column_gap: Val::Px(10.),
                    padding: UiRect::all(Val::Px(10.)),
                    ..default()
                })
                .insert(Pickable::IGNORE)
                .with_children(|parent| {
                    for (flip_x, flip_y) in
                        [(false, false), (false, true), (true, true), (true, false)]
                    {
                        parent.spawn((
                            ImageNode {
                                image: asset_server.load("branding/icon.png"),
                                flip_x,
                                flip_y,
                                ..default()
                            },
                            Node {
                                // The height will be chosen automatically to preserve the image's aspect ratio
                                width: Val::Px(75.),
                                ..default()
                            },
                        ));
                    }
                });
        });
}

pub const fn new( top_left: Val, top_right: Val, bottom_right: Val, bottom_left: Val, ) -> BorderRadius

pub const fn px( top_left: f32, top_right: f32, bottom_right: f32, bottom_left: f32, ) -> BorderRadius

Sets the radii to logical pixel values.

Examples found in repository

examples/testbed/ui.rs (lines 244-249)

    pub fn setup(mut commands: Commands) {
        commands.spawn((Camera2d, StateScoped(super::Scene::Borders)));
        let root = commands
            .spawn((
                Node {
                    flex_wrap: FlexWrap::Wrap,
                    ..default()
                },
                StateScoped(super::Scene::Borders),
            ))
            .id();

        // all the different combinations of border edges
        let borders = [
            UiRect::default(),
            UiRect::all(Val::Px(20.)),
            UiRect::left(Val::Px(20.)),
            UiRect::vertical(Val::Px(20.)),
            UiRect {
                left: Val::Px(40.),
                top: Val::Px(20.),
                ..Default::default()
            },
            UiRect {
                right: Val::Px(20.),
                bottom: Val::Px(30.),
                ..Default::default()
            },
            UiRect {
                right: Val::Px(20.),
                top: Val::Px(40.),
                bottom: Val::Px(20.),
                ..Default::default()
            },
            UiRect {
                left: Val::Px(20.),
                top: Val::Px(20.),
                bottom: Val::Px(20.),
                ..Default::default()
            },
            UiRect {
                left: Val::Px(20.),
                right: Val::Px(20.),
                bottom: Val::Px(40.),
                ..Default::default()
            },
        ];

        let non_zero = |x, y| x != Val::Px(0.) && y != Val::Px(0.);
        let border_size = |x, y| if non_zero(x, y) { f32::MAX } else { 0. };

        for border in borders {
            for rounded in [true, false] {
                let border_node = commands
                    .spawn((
                        Node {
                            width: Val::Px(100.),
                            height: Val::Px(100.),
                            border,
                            margin: UiRect::all(Val::Px(30.)),
                            align_items: AlignItems::Center,
                            justify_content: JustifyContent::Center,
                            ..default()
                        },
                        BackgroundColor(MAROON.into()),
                        BorderColor(RED.into()),
                        Outline {
                            width: Val::Px(10.),
                            offset: Val::Px(10.),
                            color: Color::WHITE,
                        },
                    ))
                    .id();

                if rounded {
                    let border_radius = BorderRadius::px(
                        border_size(border.left, border.top),
                        border_size(border.right, border.top),
                        border_size(border.right, border.bottom),
                        border_size(border.left, border.bottom),
                    );
                    commands.entity(border_node).insert(border_radius);
                }

                commands.entity(root).add_child(border_node);
            }
        }
    }

examples/ui/borders.rs (lines 189-194)

fn setup(mut commands: Commands) {
    commands.spawn(Camera2d);
    let root = commands
        .spawn((
            Node {
                margin: UiRect::all(Val::Px(25.0)),
                align_self: AlignSelf::Stretch,
                justify_self: JustifySelf::Stretch,
                flex_wrap: FlexWrap::Wrap,
                justify_content: JustifyContent::FlexStart,
                align_items: AlignItems::FlexStart,
                align_content: AlignContent::FlexStart,
                ..default()
            },
            BackgroundColor(Color::srgb(0.25, 0.25, 0.25)),
        ))
        .id();

    let root_rounded = commands
        .spawn((
            Node {
                margin: UiRect::all(Val::Px(25.0)),
                align_self: AlignSelf::Stretch,
                justify_self: JustifySelf::Stretch,
                flex_wrap: FlexWrap::Wrap,
                justify_content: JustifyContent::FlexStart,
                align_items: AlignItems::FlexStart,
                align_content: AlignContent::FlexStart,
                ..default()
            },
            BackgroundColor(Color::srgb(0.25, 0.25, 0.25)),
        ))
        .id();

    // labels for the different border edges
    let border_labels = [
        "None",
        "All",
        "Left",
        "Right",
        "Top",
        "Bottom",
        "Horizontal",
        "Vertical",
        "Top Left",
        "Bottom Left",
        "Top Right",
        "Bottom Right",
        "Top Bottom Right",
        "Top Bottom Left",
        "Top Left Right",
        "Bottom Left Right",
    ];

    // all the different combinations of border edges
    // these correspond to the labels above
    let borders = [
        UiRect::default(),
        UiRect::all(Val::Px(10.)),
        UiRect::left(Val::Px(10.)),
        UiRect::right(Val::Px(10.)),
        UiRect::top(Val::Px(10.)),
        UiRect::bottom(Val::Px(10.)),
        UiRect::horizontal(Val::Px(10.)),
        UiRect::vertical(Val::Px(10.)),
        UiRect {
            left: Val::Px(20.),
            top: Val::Px(10.),
            ..Default::default()
        },
        UiRect {
            left: Val::Px(10.),
            bottom: Val::Px(20.),
            ..Default::default()
        },
        UiRect {
            right: Val::Px(20.),
            top: Val::Px(10.),
            ..Default::default()
        },
        UiRect {
            right: Val::Px(10.),
            bottom: Val::Px(10.),
            ..Default::default()
        },
        UiRect {
            right: Val::Px(10.),
            top: Val::Px(20.),
            bottom: Val::Px(10.),
            ..Default::default()
        },
        UiRect {
            left: Val::Px(10.),
            top: Val::Px(10.),
            bottom: Val::Px(10.),
            ..Default::default()
        },
        UiRect {
            left: Val::Px(20.),
            right: Val::Px(10.),
            top: Val::Px(10.),
            ..Default::default()
        },
        UiRect {
            left: Val::Px(10.),
            right: Val::Px(10.),
            bottom: Val::Px(20.),
            ..Default::default()
        },
    ];

    for (label, border) in border_labels.into_iter().zip(borders) {
        let inner_spot = commands
            .spawn((
                Node {
                    width: Val::Px(10.),
                    height: Val::Px(10.),
                    ..default()
                },
                BackgroundColor(YELLOW.into()),
            ))
            .id();
        let border_node = commands
            .spawn((
                Node {
                    width: Val::Px(50.),
                    height: Val::Px(50.),
                    border,
                    margin: UiRect::all(Val::Px(20.)),
                    align_items: AlignItems::Center,
                    justify_content: JustifyContent::Center,
                    ..default()
                },
                BackgroundColor(MAROON.into()),
                BorderColor(RED.into()),
                Outline {
                    width: Val::Px(6.),
                    offset: Val::Px(6.),
                    color: Color::WHITE,
                },
            ))
            .add_child(inner_spot)
            .id();
        let label_node = commands
            .spawn((
                Text::new(label),
                TextFont {
                    font_size: 9.0,
                    ..Default::default()
                },
            ))
            .id();
        let container = commands
            .spawn(Node {
                flex_direction: FlexDirection::Column,
                align_items: AlignItems::Center,
                ..default()
            })
            .add_children(&[border_node, label_node])
            .id();
        commands.entity(root).add_child(container);
    }

    for (label, border) in border_labels.into_iter().zip(borders) {
        let inner_spot = commands
            .spawn((
                Node {
                    width: Val::Px(10.),
                    height: Val::Px(10.),
                    ..default()
                },
                BorderRadius::MAX,
                BackgroundColor(YELLOW.into()),
            ))
            .id();
        let non_zero = |x, y| x != Val::Px(0.) && y != Val::Px(0.);
        let border_size = |x, y| if non_zero(x, y) { f32::MAX } else { 0. };
        let border_radius = BorderRadius::px(
            border_size(border.left, border.top),
            border_size(border.right, border.top),
            border_size(border.right, border.bottom),
            border_size(border.left, border.bottom),
        );
        let border_node = commands
            .spawn((
                Node {
                    width: Val::Px(50.),
                    height: Val::Px(50.),
                    border,
                    margin: UiRect::all(Val::Px(20.)),
                    align_items: AlignItems::Center,
                    justify_content: JustifyContent::Center,
                    ..default()
                },
                BackgroundColor(MAROON.into()),
                BorderColor(RED.into()),
                border_radius,
                Outline {
                    width: Val::Px(6.),
                    offset: Val::Px(6.),
                    color: Color::WHITE,
                },
            ))
            .add_child(inner_spot)
            .id();
        let label_node = commands
            .spawn((
                Text::new(label),
                TextFont {
                    font_size: 9.0,
                    ..Default::default()
                },
            ))
            .id();
        let container = commands
            .spawn(Node {
                flex_direction: FlexDirection::Column,
                align_items: AlignItems::Center,
                ..default()
            })
            .add_children(&[border_node, label_node])
            .id();
        commands.entity(root_rounded).add_child(container);
    }

    let border_label = commands
        .spawn((
            Node {
                margin: UiRect {
                    left: Val::Px(25.0),
                    right: Val::Px(25.0),
                    top: Val::Px(25.0),
                    bottom: Val::Px(0.0),
                },
                ..default()
            },
            BackgroundColor(Color::srgb(0.25, 0.25, 0.25)),
        ))
        .with_children(|builder| {
            builder.spawn((
                Text::new("Borders"),
                TextFont {
                    font_size: 20.0,
                    ..Default::default()
                },
            ));
        })
        .id();

    let border_rounded_label = commands
        .spawn((
            Node {
                margin: UiRect {
                    left: Val::Px(25.0),
                    right: Val::Px(25.0),
                    top: Val::Px(25.0),
                    bottom: Val::Px(0.0),
                },
                ..default()
            },
            BackgroundColor(Color::srgb(0.25, 0.25, 0.25)),
        ))
        .with_children(|builder| {
            builder.spawn((
                Text::new("Borders Rounded"),
                TextFont {
                    font_size: 20.0,
                    ..Default::default()
                },
            ));
        })
        .id();

    commands
        .spawn((
            Node {
                margin: UiRect::all(Val::Px(25.0)),
                flex_direction: FlexDirection::Column,
                align_self: AlignSelf::Stretch,
                justify_self: JustifySelf::Stretch,
                flex_wrap: FlexWrap::Wrap,
                justify_content: JustifyContent::FlexStart,
                align_items: AlignItems::FlexStart,
                align_content: AlignContent::FlexStart,
                ..default()
            },
            BackgroundColor(Color::srgb(0.25, 0.25, 0.25)),
        ))
        .add_child(border_label)
        .add_child(root)
        .add_child(border_rounded_label)
        .add_child(root_rounded);
}

pub const fn percent( top_left: f32, top_right: f32, bottom_right: f32, bottom_left: f32, ) -> BorderRadius

Sets the radii to percentage values.

pub const fn top_left(radius: Val) -> BorderRadius

Sets the radius for the top left corner. Remaining corners will be right-angled.

pub const fn top_right(radius: Val) -> BorderRadius

Sets the radius for the top right corner. Remaining corners will be right-angled.

pub const fn bottom_right(radius: Val) -> BorderRadius

Sets the radius for the bottom right corner. Remaining corners will be right-angled.

Examples found in repository

examples/testbed/ui.rs (line 285)

    pub fn setup(mut commands: Commands) {
        commands.spawn((Camera2d, StateScoped(super::Scene::BoxShadow)));

        commands
            .spawn((
                Node {
                    width: Val::Percent(100.0),
                    height: Val::Percent(100.0),
                    padding: UiRect::all(Val::Px(30.)),
                    column_gap: Val::Px(200.),
                    flex_wrap: FlexWrap::Wrap,
                    ..default()
                },
                BackgroundColor(GREEN.into()),
                StateScoped(super::Scene::BoxShadow),
            ))
            .with_children(|commands| {
                let example_nodes = [
                    (
                        Vec2::splat(100.),
                        Vec2::ZERO,
                        10.,
                        0.,
                        BorderRadius::bottom_right(Val::Px(10.)),
                    ),
                    (Vec2::new(200., 50.), Vec2::ZERO, 10., 0., BorderRadius::MAX),
                    (
                        Vec2::new(100., 50.),
                        Vec2::ZERO,
                        10.,
                        10.,
                        BorderRadius::ZERO,
                    ),
                    (
                        Vec2::splat(100.),
                        Vec2::splat(20.),
                        10.,
                        10.,
                        BorderRadius::bottom_right(Val::Px(10.)),
                    ),
                    (
                        Vec2::splat(100.),
                        Vec2::splat(50.),
                        0.,
                        10.,
                        BorderRadius::ZERO,
                    ),
                    (
                        Vec2::new(50., 100.),
                        Vec2::splat(10.),
                        0.,
                        10.,
                        BorderRadius::MAX,
                    ),
                ];

                for (size, offset, spread, blur, border_radius) in example_nodes {
                    commands.spawn((
                        Node {
                            width: Val::Px(size.x),
                            height: Val::Px(size.y),
                            border: UiRect::all(Val::Px(2.)),
                            ..default()
                        },
                        BorderColor(WHITE.into()),
                        border_radius,
                        BackgroundColor(BLUE.into()),
                        BoxShadow::new(
                            Color::BLACK.with_alpha(0.9),
                            Val::Percent(offset.x),
                            Val::Percent(offset.y),
                            Val::Percent(spread),
                            Val::Px(blur),
                        ),
                    ));
                }
            });
    }

examples/ui/box_shadow.rs (line 59)

fn setup(mut commands: Commands) {
    // `from_env` panics on the web
    #[cfg(not(target_arch = "wasm32"))]
    let args: Args = argh::from_env();
    #[cfg(target_arch = "wasm32")]
    let args = Args::from_args(&[], &[]).unwrap();

    // ui camera
    commands.spawn((Camera2d, BoxShadowSamples(args.samples)));

    commands
        .spawn((
            Node {
                width: Val::Percent(100.0),
                height: Val::Percent(100.0),
                padding: UiRect::all(Val::Px(30.)),
                column_gap: Val::Px(30.),
                flex_wrap: FlexWrap::Wrap,
                ..default()
            },
            BackgroundColor(DEEP_SKY_BLUE.into()),
        ))
        .with_children(|commands| {
            let example_nodes = [
                (
                    Vec2::splat(50.),
                    Vec2::ZERO,
                    10.,
                    0.,
                    BorderRadius::bottom_right(Val::Px(10.)),
                ),
                (Vec2::new(50., 25.), Vec2::ZERO, 10., 0., BorderRadius::ZERO),
                (Vec2::splat(50.), Vec2::ZERO, 10., 0., BorderRadius::MAX),
                (Vec2::new(100., 25.), Vec2::ZERO, 10., 0., BorderRadius::MAX),
                (
                    Vec2::splat(50.),
                    Vec2::ZERO,
                    10.,
                    0.,
                    BorderRadius::bottom_right(Val::Px(10.)),
                ),
                (Vec2::new(50., 25.), Vec2::ZERO, 0., 10., BorderRadius::ZERO),
                (
                    Vec2::splat(50.),
                    Vec2::ZERO,
                    0.,
                    10.,
                    BorderRadius::bottom_right(Val::Px(10.)),
                ),
                (Vec2::new(100., 25.), Vec2::ZERO, 0., 10., BorderRadius::MAX),
                (
                    Vec2::splat(50.),
                    Vec2::splat(25.),
                    0.,
                    0.,
                    BorderRadius::ZERO,
                ),
                (
                    Vec2::new(50., 25.),
                    Vec2::splat(25.),
                    0.,
                    0.,
                    BorderRadius::ZERO,
                ),
                (
                    Vec2::splat(50.),
                    Vec2::splat(10.),
                    0.,
                    0.,
                    BorderRadius::bottom_right(Val::Px(10.)),
                ),
                (
                    Vec2::splat(50.),
                    Vec2::splat(25.),
                    0.,
                    10.,
                    BorderRadius::ZERO,
                ),
                (
                    Vec2::new(50., 25.),
                    Vec2::splat(25.),
                    0.,
                    10.,
                    BorderRadius::ZERO,
                ),
                (
                    Vec2::splat(50.),
                    Vec2::splat(10.),
                    0.,
                    10.,
                    BorderRadius::bottom_right(Val::Px(10.)),
                ),
                (
                    Vec2::splat(50.),
                    Vec2::splat(10.),
                    0.,
                    3.,
                    BorderRadius::ZERO,
                ),
                (
                    Vec2::new(50., 25.),
                    Vec2::splat(10.),
                    0.,
                    3.,
                    BorderRadius::ZERO,
                ),
                (
                    Vec2::splat(50.),
                    Vec2::splat(10.),
                    0.,
                    3.,
                    BorderRadius::bottom_right(Val::Px(10.)),
                ),
                (
                    Vec2::splat(50.),
                    Vec2::splat(10.),
                    0.,
                    3.,
                    BorderRadius::all(Val::Px(20.)),
                ),
                (
                    Vec2::new(50., 25.),
                    Vec2::splat(10.),
                    0.,
                    3.,
                    BorderRadius::all(Val::Px(20.)),
                ),
                (
                    Vec2::new(25., 50.),
                    Vec2::splat(10.),
                    0.,
                    3.,
                    BorderRadius::MAX,
                ),
                (
                    Vec2::splat(50.),
                    Vec2::splat(10.),
                    0.,
                    10.,
                    BorderRadius::all(Val::Px(20.)),
                ),
                (
                    Vec2::new(50., 25.),
                    Vec2::splat(10.),
                    0.,
                    10.,
                    BorderRadius::all(Val::Px(20.)),
                ),
                (
                    Vec2::new(25., 50.),
                    Vec2::splat(10.),
                    0.,
                    10.,
                    BorderRadius::MAX,
                ),
            ];

            for (size, offset, spread, blur, border_radius) in example_nodes {
                commands.spawn(box_shadow_node_bundle(
                    size,
                    offset,
                    spread,
                    blur,
                    border_radius,
                ));
            }

            // Demonstrate multiple shadows on one node
            commands.spawn((
                Node {
                    width: Val::Px(40.),
                    height: Val::Px(40.),
                    border: UiRect::all(Val::Px(4.)),
                    ..default()
                },
                BorderColor(LIGHT_SKY_BLUE.into()),
                BorderRadius::all(Val::Px(20.)),
                BackgroundColor(DEEP_SKY_BLUE.into()),
                BoxShadow(vec![
                    ShadowStyle {
                        color: RED.with_alpha(0.7).into(),
                        x_offset: Val::Px(-20.),
                        y_offset: Val::Px(-5.),
                        spread_radius: Val::Percent(10.),
                        blur_radius: Val::Px(3.),
                    },
                    ShadowStyle {
                        color: BLUE.with_alpha(0.7).into(),
                        x_offset: Val::Px(-5.),
                        y_offset: Val::Px(-20.),
                        spread_radius: Val::Percent(10.),
                        blur_radius: Val::Px(3.),
                    },
                    ShadowStyle {
                        color: YELLOW.with_alpha(0.7).into(),
                        x_offset: Val::Px(20.),
                        y_offset: Val::Px(5.),
                        spread_radius: Val::Percent(10.),
                        blur_radius: Val::Px(3.),
                    },
                    ShadowStyle {
                        color: GREEN.with_alpha(0.7).into(),
                        x_offset: Val::Px(5.),
                        y_offset: Val::Px(20.),
                        spread_radius: Val::Percent(10.),
                        blur_radius: Val::Px(3.),
                    },
                ]),
            ));
        });
}

pub const fn bottom_left(radius: Val) -> BorderRadius

Sets the radius for the bottom left corner. Remaining corners will be right-angled.

pub const fn left(radius: Val) -> BorderRadius

Sets the radii for the top left and bottom left corners. Remaining corners will be right-angled.

pub const fn right(radius: Val) -> BorderRadius

Sets the radii for the top right and bottom right corners. Remaining corners will be right-angled.

pub const fn top(radius: Val) -> BorderRadius

Sets the radii for the top left and top right corners. Remaining corners will be right-angled.

pub const fn bottom(radius: Val) -> BorderRadius

Sets the radii for the bottom left and bottom right corners. Remaining corners will be right-angled.

pub const fn with_top_left(self, radius: Val) -> BorderRadius

Returns the BorderRadius with its top_left field set to the given value.

pub const fn with_top_right(self, radius: Val) -> BorderRadius

Returns the BorderRadius with its top_right field set to the given value.

pub const fn with_bottom_right(self, radius: Val) -> BorderRadius

Returns the BorderRadius with its bottom_right field set to the given value.

pub const fn with_bottom_left(self, radius: Val) -> BorderRadius

Returns the BorderRadius with its bottom_left field set to the given value.

pub const fn with_left(self, radius: Val) -> BorderRadius

Returns the BorderRadius with its top_left and bottom_left fields set to the given value.

Examples found in repository

examples/3d/../helpers/widgets.rs (lines 86-90)

pub fn spawn_option_button<T>(
    parent: &mut ChildSpawnerCommands,
    option_value: T,
    option_name: &str,
    is_selected: bool,
    is_first: bool,
    is_last: bool,
) where
    T: Clone + Send + Sync + 'static,
{
    let (bg_color, fg_color) = if is_selected {
        (Color::WHITE, Color::BLACK)
    } else {
        (Color::BLACK, Color::WHITE)
    };

    // Add the button node.
    parent
        .spawn((
            Button,
            Node {
                border: BUTTON_BORDER.with_left(if is_first { Val::Px(1.0) } else { Val::Px(0.0) }),
                justify_content: JustifyContent::Center,
                align_items: AlignItems::Center,
                padding: BUTTON_PADDING,
                ..default()
            },
            BUTTON_BORDER_COLOR,
            BorderRadius::ZERO
                .with_left(if is_first {
                    BUTTON_BORDER_RADIUS_SIZE
                } else {
                    Val::Px(0.0)
                })
                .with_right(if is_last {
                    BUTTON_BORDER_RADIUS_SIZE
                } else {
                    Val::Px(0.0)
                }),
            BackgroundColor(bg_color),
        ))
        .insert(RadioButton)
        .insert(WidgetClickSender(option_value.clone()))
        .with_children(|parent| {
            spawn_ui_text(parent, option_name, fg_color)
                .insert(RadioButtonText)
                .insert(WidgetClickSender(option_value));
        });
}

pub const fn with_right(self, radius: Val) -> BorderRadius

Returns the BorderRadius with its top_right and bottom_right fields set to the given value.

Examples found in repository

examples/3d/../helpers/widgets.rs (lines 91-95)

pub fn spawn_option_button<T>(
    parent: &mut ChildSpawnerCommands,
    option_value: T,
    option_name: &str,
    is_selected: bool,
    is_first: bool,
    is_last: bool,
) where
    T: Clone + Send + Sync + 'static,
{
    let (bg_color, fg_color) = if is_selected {
        (Color::WHITE, Color::BLACK)
    } else {
        (Color::BLACK, Color::WHITE)
    };

    // Add the button node.
    parent
        .spawn((
            Button,
            Node {
                border: BUTTON_BORDER.with_left(if is_first { Val::Px(1.0) } else { Val::Px(0.0) }),
                justify_content: JustifyContent::Center,
                align_items: AlignItems::Center,
                padding: BUTTON_PADDING,
                ..default()
            },
            BUTTON_BORDER_COLOR,
            BorderRadius::ZERO
                .with_left(if is_first {
                    BUTTON_BORDER_RADIUS_SIZE
                } else {
                    Val::Px(0.0)
                })
                .with_right(if is_last {
                    BUTTON_BORDER_RADIUS_SIZE
                } else {
                    Val::Px(0.0)
                }),
            BackgroundColor(bg_color),
        ))
        .insert(RadioButton)
        .insert(WidgetClickSender(option_value.clone()))
        .with_children(|parent| {
            spawn_ui_text(parent, option_name, fg_color)
                .insert(RadioButtonText)
                .insert(WidgetClickSender(option_value));
        });
}

pub const fn with_top(self, radius: Val) -> BorderRadius

Returns the BorderRadius with its top_left and top_right fields set to the given value.

pub const fn with_bottom(self, radius: Val) -> BorderRadius

Returns the BorderRadius with its bottom_left and bottom_right fields set to the given value.

pub fn resolve_single_corner( radius: Val, node_size: Vec2, viewport_size: Vec2, scale_factor: f32, ) -> f32

Resolve the border radius for a single corner from the given context values. Returns the radius of the corner in physical pixels.

pub fn resolve( &self, node_size: Vec2, viewport_size: Vec2, scale_factor: f32, ) -> ResolvedBorderRadius

Resolve the border radii for the corners from the given context values. Returns the radii of the each corner in physical pixels.

Trait Implementations

impl Clone for BorderRadius

fn clone(&self) -> BorderRadius

Returns a copy of the value.

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

Performs copy-assignment from source.

impl Component for BorderRadius

where BorderRadius: 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, components: &mut ComponentsRegistrator<'_>, required_components: &mut RequiredComponents, inheritance_depth: u16, recursion_check_stack: &mut Vec<ComponentId>, )

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 register_component_hooks(hooks: &mut ComponentHooks)

👎Deprecated since 0.16.0: Use the individual hook methods instead (e.g., Component::on_add, etc.)

Called when registering this component, allowing mutable access to its ComponentHooks.

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_replace() -> Option<for<'w> fn(DeferredWorld<'w>, HookContext)>

Gets the on_replace 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]

impl Debug for BorderRadius

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

Formats the value using the given formatter.

impl Default for BorderRadius

fn default() -> BorderRadius

Returns the “default value” for a type.

impl<'de> Deserialize<'de> for BorderRadius

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

where __D: Deserializer<'de>,

Deserialize this value from the given Serde deserializer.

impl FromArg for &'static BorderRadius

where BorderRadius: Any + Send + Sync, Val: FromReflect + TypePath + MaybeTyped + RegisterForReflection,

type This<'from_arg> = &'from_arg BorderRadius

The type to convert into.

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

Creates an item from an argument.

impl FromArg for &'static mut BorderRadius

where BorderRadius: Any + Send + Sync, Val: FromReflect + TypePath + MaybeTyped + RegisterForReflection,

type This<'from_arg> = &'from_arg mut BorderRadius

The type to convert into.

fn from_arg( arg: Arg<'_>, ) -> Result<<&'static mut BorderRadius as FromArg>::This<'_>, ArgError>

Creates an item from an argument.

impl FromArg for BorderRadius

where BorderRadius: Any + Send + Sync, Val: FromReflect + TypePath + MaybeTyped + RegisterForReflection,

type This<'from_arg> = BorderRadius

The type to convert into.

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

Creates an item from an argument.

impl FromReflect for BorderRadius

where BorderRadius: Any + Send + Sync, Val: FromReflect + TypePath + MaybeTyped + RegisterForReflection,

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

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 &BorderRadius

where BorderRadius: Any + Send + Sync, Val: FromReflect + TypePath + MaybeTyped + RegisterForReflection,

fn ownership() -> Ownership

Returns the ownership of Self.

impl GetOwnership for &mut BorderRadius

where BorderRadius: Any + Send + Sync, Val: FromReflect + TypePath + MaybeTyped + RegisterForReflection,

fn ownership() -> Ownership

Returns the ownership of Self.

impl GetOwnership for BorderRadius

where BorderRadius: Any + Send + Sync, Val: FromReflect + TypePath + MaybeTyped + RegisterForReflection,

fn ownership() -> Ownership

Returns the ownership of Self.

impl GetTypeRegistration for BorderRadius

where BorderRadius: Any + Send + Sync, Val: FromReflect + TypePath + MaybeTyped + RegisterForReflection,

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 &BorderRadius

where BorderRadius: Any + Send + Sync, Val: FromReflect + TypePath + MaybeTyped + RegisterForReflection,

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

where &BorderRadius: 'into_return,

Converts Self into a Return value.

impl IntoReturn for &mut BorderRadius

where BorderRadius: Any + Send + Sync, Val: FromReflect + TypePath + MaybeTyped + RegisterForReflection,

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

where &mut BorderRadius: 'into_return,

Converts Self into a Return value.

impl IntoReturn for BorderRadius

where BorderRadius: Any + Send + Sync, Val: FromReflect + TypePath + MaybeTyped + RegisterForReflection,

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

where BorderRadius: 'into_return,

Converts Self into a Return value.

impl PartialEq for BorderRadius

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

Tests for self and other values to be equal, and is used by ==.

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

Tests for !=. The default implementation is almost always sufficient, and should not be overridden without very good reason.

impl PartialReflect for BorderRadius

where BorderRadius: Any + Send + Sync, Val: FromReflect + TypePath + MaybeTyped + RegisterForReflection,

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<BorderRadius>) -> ReflectOwned

Returns an owned enumeration of “kinds” of type.

fn try_into_reflect( self: Box<BorderRadius>, ) -> 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<BorderRadius>) -> 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 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 clone_value(&self) -> Box<dyn PartialReflect>

👎Deprecated since 0.16.0: to clone reflected values, prefer using reflect_clone. To convert reflected values to dynamic ones, use to_dynamic.

Clones Self into its dynamic representation.

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

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

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 BorderRadius

where BorderRadius: Any + Send + Sync, Val: FromReflect + TypePath + MaybeTyped + RegisterForReflection,

fn into_any(self: Box<BorderRadius>) -> 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<BorderRadius>) -> 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 BorderRadius

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 BorderRadius

where BorderRadius: Any + Send + Sync, Val: FromReflect + TypePath + MaybeTyped + RegisterForReflection,

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

Returns 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)>

Returns 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)>

Returns 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)>

Returns 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>

Returns the name of the field with index index.

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) -> DynamicStruct

fn clone_dynamic(&self) -> DynamicStruct

👎Deprecated since 0.16.0: use to_dynamic_struct instead

Clones the struct into a DynamicStruct.

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

Will return None if TypeInfo is not available.

impl TypePath for BorderRadius

where BorderRadius: Any + Send + Sync,

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 BorderRadius

where BorderRadius: Any + Send + Sync, Val: FromReflect + TypePath + MaybeTyped + RegisterForReflection,

fn type_info() -> &'static TypeInfo

Returns the compile-time info for the underlying type.

impl Copy for BorderRadius

impl StructuralPartialEq for BorderRadius