Struct bevy::ui::UiRect

pub struct UiRect {
    pub left: Val,
    pub right: Val,
    pub top: Val,
    pub bottom: Val,
}

Expand description

A type which is commonly used to define positions, margins, paddings and borders.

Examples

Position

A position is used to determine where to place a UI element.

let position = UiRect {
    left: Val::Px(100.0),
    top: Val::Px(50.0),
    ..default()
};

If you define opposite sides of the position, the size of the UI element will automatically be calculated if not explicitly specified. This means that if you have a Size that uses Val::Undefined as a width and height, the size would be determined by the window size and the values specified in the position.

let position = UiRect {
    left: Val::Px(100.0),
    right: Val::Px(200.0),
    top: Val::Px(300.0),
    bottom: Val::Px(400.0),
};

To determine the width of the UI element you have to take the width of the window and subtract it by the left and right values of the position. To determine the height of the UI element you have to take the height of the window and subtract it by the top and bottom values of the position. If we had a window with a width and height of 1000px, the UI element declared above would have a width of 700px and a height of 300px.

// Size of the window
let window_width = 1000.0;
let window_height = 1000.0;

// Values of the position
let left = 100.0;
let right = 200.0;
let top = 300.0;
let bottom = 400.0;

// Calculation to get the size of the UI element
let ui_element_width = window_width - left - right;
let ui_element_height = window_height - top - bottom;

assert_eq!(ui_element_width, 700.0);
assert_eq!(ui_element_height, 300.0);

If you define a Size and also all four sides of the position, the top and left values of the position are used to determine where to place the UI element. The size will not be calculated using the bottom and right values of the position because the size of the UI element is already explicitly specified.

let style = Style {
    position: UiRect { // Defining all four sides
        left: Val::Px(100.0),
        right: Val::Px(200.0),
        top: Val::Px(300.0),
        bottom: Val::Px(400.0),
    },
    size: Size::new(Val::Percent(100.0), Val::Percent(50.0)), // but also explicitly specifying a size
    ..default()
};

Margin

A margin is used to create space around UI elements, outside of any defined borders.

let margin = UiRect::all(Val::Auto); // Centers the UI element

Padding

A padding is used to create space around UI elements, inside of any defined borders.

let padding = UiRect {
    left: Val::Px(10.0),
    right: Val::Px(20.0),
    top: Val::Px(30.0),
    bottom: Val::Px(40.0),
};

Borders

A border is used to define the width of the border of a UI element.

let border = UiRect {
    left: Val::Px(10.0),
    right: Val::Px(20.0),
    top: Val::Px(30.0),
    bottom: Val::Px(40.0),
};

Fields§

§left: Val

The value corresponding to the left side of the UI rect.

§right: Val

The value corresponding to the right side of the UI rect.

§top: Val

The value corresponding to the top side of the UI rect.

§bottom: Val

The value corresponding to the bottom side of the UI rect.

Implementations§

§

impl UiRect

pub const DEFAULT: UiRect = Self{ left: Val::DEFAULT, right: Val::DEFAULT, top: Val::DEFAULT, bottom: Val::DEFAULT,}

pub const fn new(left: Val, right: Val, top: Val, bottom: Val) -> UiRect

Creates a new UiRect from the values specified.

Example

let ui_rect = UiRect::new(
    Val::Px(10.0),
    Val::Px(20.0),
    Val::Px(30.0),
    Val::Px(40.0),
);

assert_eq!(ui_rect.left, Val::Px(10.0));
assert_eq!(ui_rect.right, Val::Px(20.0));
assert_eq!(ui_rect.top, Val::Px(30.0));
assert_eq!(ui_rect.bottom, Val::Px(40.0));

pub const fn all(value: Val) -> UiRect

Creates a new UiRect where all sides have the same value.

Example

let ui_rect = UiRect::all(Val::Px(10.0));

assert_eq!(ui_rect.left, Val::Px(10.0));
assert_eq!(ui_rect.right, Val::Px(10.0));
assert_eq!(ui_rect.top, Val::Px(10.0));
assert_eq!(ui_rect.bottom, Val::Px(10.0));

pub fn horizontal(value: Val) -> UiRect

Creates a new UiRect where left and right take the given value.

Example

let ui_rect = UiRect::horizontal(Val::Px(10.0));

assert_eq!(ui_rect.left, Val::Px(10.0));
assert_eq!(ui_rect.right, Val::Px(10.0));
assert_eq!(ui_rect.top, Val::Undefined);
assert_eq!(ui_rect.bottom, Val::Undefined);

pub fn vertical(value: Val) -> UiRect

Creates a new UiRect where top and bottom take the given value.

Example

let ui_rect = UiRect::vertical(Val::Px(10.0));

assert_eq!(ui_rect.left, Val::Undefined);
assert_eq!(ui_rect.right, Val::Undefined);
assert_eq!(ui_rect.top, Val::Px(10.0));
assert_eq!(ui_rect.bottom, Val::Px(10.0));

pub fn left(value: Val) -> UiRect

Creates a new UiRect where left takes the given value.

Example

let ui_rect = UiRect::left(Val::Px(10.0));

assert_eq!(ui_rect.left, Val::Px(10.0));
assert_eq!(ui_rect.right, Val::Undefined);
assert_eq!(ui_rect.top, Val::Undefined);
assert_eq!(ui_rect.bottom, Val::Undefined);

pub fn right(value: Val) -> UiRect

Creates a new UiRect where right takes the given value.

Example

let ui_rect = UiRect::right(Val::Px(10.0));

assert_eq!(ui_rect.left, Val::Undefined);
assert_eq!(ui_rect.right, Val::Px(10.0));
assert_eq!(ui_rect.top, Val::Undefined);
assert_eq!(ui_rect.bottom, Val::Undefined);

pub fn top(value: Val) -> UiRect

Creates a new UiRect where top takes the given value.

Example

let ui_rect = UiRect::top(Val::Px(10.0));

assert_eq!(ui_rect.left, Val::Undefined);
assert_eq!(ui_rect.right, Val::Undefined);
assert_eq!(ui_rect.top, Val::Px(10.0));
assert_eq!(ui_rect.bottom, Val::Undefined);

pub fn bottom(value: Val) -> UiRect

Creates a new UiRect where bottom takes the given value.

Example

let ui_rect = UiRect::bottom(Val::Px(10.0));

assert_eq!(ui_rect.left, Val::Undefined);
assert_eq!(ui_rect.right, Val::Undefined);
assert_eq!(ui_rect.top, Val::Undefined);
assert_eq!(ui_rect.bottom, Val::Px(10.0));