Struct bevy::ui::Style

pub struct Style {

    pub display: Display,
    pub position_type: PositionType,
    pub overflow: Overflow,
    pub direction: Direction,
    pub left: Val,
    pub right: Val,
    pub top: Val,
    pub bottom: Val,
    pub width: Val,
    pub height: Val,
    pub min_width: Val,
    pub min_height: Val,
    pub max_width: Val,
    pub max_height: Val,
    pub aspect_ratio: Option<f32>,
    pub align_items: AlignItems,
    pub justify_items: JustifyItems,
    pub align_self: AlignSelf,
    pub justify_self: JustifySelf,
    pub align_content: AlignContent,
    pub justify_content: JustifyContent,
    pub margin: UiRect,
    pub padding: UiRect,
    pub border: UiRect,
    pub flex_direction: FlexDirection,
    pub flex_wrap: FlexWrap,
    pub flex_grow: f32,
    pub flex_shrink: f32,
    pub flex_basis: Val,
    pub row_gap: Val,
    pub column_gap: Val,
    pub grid_auto_flow: GridAutoFlow,
    pub grid_template_rows: Vec<RepeatedGridTrack, Global>,
    pub grid_template_columns: Vec<RepeatedGridTrack, Global>,
    pub grid_auto_rows: Vec<GridTrack, Global>,
    pub grid_auto_columns: Vec<GridTrack, Global>,
    pub grid_row: GridPlacement,
    pub grid_column: GridPlacement,
}

Describes the style of a UI container node

Node’s can be laid out using either Flexbox or CSS Grid Layout.
See below for general learning resources and for documentation on the individual style properties.

Flexbox

• MDN: Basic Concepts of Grid Layout
• A Complete Guide To Flexbox by CSS Tricks. This is detailed guide with illustrations and comphrehensive written explanation of the different Flexbox properties and how they work.
• Flexbox Froggy. An interactive tutorial/game that teaches the essential parts of Flebox in a fun engaging way.

CSS Grid

• MDN: Basic Concepts of Flexbox
• A Complete Guide To CSS Grid by CSS Tricks. This is detailed guide with illustrations and comphrehensive written explanation of the different CSS Grid properties and how they work.
• CSS Grid Garden. An interactive tutorial/game that teaches the essential parts of CSS Grid in a fun engaging way.

Fields

display: Display

Which layout algorithm to use when laying out this node’s contents:

• Display::Flex: Use the Flexbox layout algorithm
• Display::Grid: Use the CSS Grid layout algorithm
• Display::None: Hide this node and perform layout as if it does not exist.

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

position_type: PositionType

Whether a node should be laid out in-flow with, or independently of it’s siblings:

• PositionType::Relative: Layout this node in-flow with other nodes using the usual (flexbox/grid) layout algorithm.
• PositionType::Absolute: Layout this node on top and independently of other nodes.

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

overflow: Overflow

Whether overflowing content should be displayed or clipped.

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

direction: Direction

Defines the text direction. For example English is written LTR (left-to-right) while Arabic is written RTL (right-to-left).

Note: the corresponding CSS property also affects box layout order, but this isn’t yet implemented in bevy. https://developer.mozilla.org/en-US/docs/Web/CSS/direction

left: Val

The horizontal position of the left edge of the node.

• For relatively positioned nodes, this is relative to the node’s position as computed during regular layout.
• For absolutely positioned nodes, this is relative to the parent node’s bounding box.

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

right: Val

The horizontal position of the right edge of the node.

• For relatively positioned nodes, this is relative to the node’s position as computed during regular layout.
• For absolutely positioned nodes, this is relative to the parent node’s bounding box.

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

top: Val

The vertical position of the top edge of the node.

• For relatively positioned nodes, this is relative to the node’s position as computed during regular layout.
• For absolutely positioned nodes, this is relative to the parent node’s bounding box.

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

bottom: Val

The vertical position of the bottom edge of the node.

• For relatively positioned nodes, this is relative to the node’s position as computed during regular layout.
• For absolutely positioned nodes, this is relative to the parent node’s bounding box.

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

width: Val

The ideal width of the node. width is used when it is within the bounds defined by min_width and max_width.

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

height: Val

The ideal height of the node. height is used when it is within the bounds defined by min_height and max_height.

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

min_width: Val

The minimum width of the node. min_width is used if it is greater than either width and/or max_width.

https://developer.mozilla.org/en-US/docs/Web/CSS/min-width

min_height: Val

The minimum height of the node. min_height is used if it is greater than either height and/or max_height.

https://developer.mozilla.org/en-US/docs/Web/CSS/min-height

max_width: Val

The maximum width of the node. max_width is used if it is within the bounds defined by min_width and width.

https://developer.mozilla.org/en-US/docs/Web/CSS/max-width

max_height: Val

The maximum height of the node. max_height is used if it is within the bounds defined by min_height and height.

https://developer.mozilla.org/en-US/docs/Web/CSS/max-height

aspect_ratio: Option<f32>

The aspect ratio of the node (defined as width / height)

https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio

align_items: AlignItems

For Flexbox containers:

• Sets default cross-axis alignment of the child items. For CSS Grid containers:
• Controls block (vertical) axis alignment of children of this grid container within their grid areas

This value is overriden JustifySelf on the child node is set.

https://developer.mozilla.org/en-US/docs/Web/CSS/align-items

justify_items: JustifyItems

For Flexbox containers:

• This property has no effect. See justify_content for main-axis alignment of flex items. For CSS Grid containers:
• Sets default inline (horizontal) axis alignment of child items within their grid areas

This value is overriden JustifySelf on the child node is set.

https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items

align_self: AlignSelf

For Flexbox items:

• Controls cross-axis alignment of the item. For CSS Grid items:
• Controls block (vertical) axis alignment of a grid item within it’s grid area

If set to Auto, alignment is inherited from the value of AlignItems set on the parent node.

https://developer.mozilla.org/en-US/docs/Web/CSS/align-self

justify_self: JustifySelf

For Flexbox items:

• This property has no effect. See justify_content for main-axis alignment of flex items. For CSS Grid items:
• Controls inline (horizontal) axis alignment of a grid item within it’s grid area.

If set to Auto, alignment is inherited from the value of JustifyItems set on the parent node.

https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items

align_content: AlignContent

For Flexbox containers:

• Controls alignment of lines if flex_wrap is set to FlexWrap::Wrap and there are multiple lines of items For CSS Grid container:
• Controls alignment of grid rows

https://developer.mozilla.org/en-US/docs/Web/CSS/align-content

justify_content: JustifyContent

For Flexbox containers:

• Controls alignment of items in the main axis For CSS Grid containers:
• Controls alignment of grid columns

https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content

margin: UiRect

The amount of space around a node outside its border.

If a percentage value is used, the percentage is calculated based on the width of the parent node.

Example

let style = Style {
    margin: UiRect {
        left: Val::Percent(10.),
        right: Val::Percent(10.),
        top: Val::Percent(15.),
        bottom: Val::Percent(15.)
    },
    ..Default::default()
};

A node with this style and a parent with dimensions of 100px by 300px, will have calculated margins of 10px on both left and right edges, and 15px on both top and bottom edges.

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

padding: UiRect

The amount of space between the edges of a node and its contents.

If a percentage value is used, the percentage is calculated based on the width of the parent node.

Example

let style = Style {
    padding: UiRect {
        left: Val::Percent(1.),
        right: Val::Percent(2.),
        top: Val::Percent(3.),
        bottom: Val::Percent(4.)
    },
    ..Default::default()
};

A node with this style and a parent with dimensions of 300px by 100px, will have calculated padding of 3px on the left, 6px on the right, 9px on the top and 12px on the bottom.

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

border: UiRect

The amount of space between the margins of a node and its padding.

If a percentage value is used, the percentage is calculated based on the width of the parent node.

The size of the node will be expanded if there are constraints that prevent the layout algorithm from placing the border within the existing node boundary.

Rendering for borders is not yet implemented.

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

flex_direction: FlexDirection

Whether a Flexbox container should be a row or a column. This property has no effect of Grid nodes.

https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction

flex_wrap: FlexWrap

Whether a Flexbox container should wrap it’s contents onto multiple line wrap if they overflow. This property has no effect of Grid nodes.

https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap

flex_grow: f32

Defines how much a flexbox item should grow if there’s space available. Defaults to 0 (don’t grow at all).

https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow

flex_shrink: f32

Defines how much a flexbox item should shrink if there’s not enough space available. Defaults to 1.

https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink

flex_basis: Val

The initial length of a flexbox in the main axis, before flex growing/shrinking properties are applied.

flex_basis overrides size on the main axis if both are set, but it obeys the bounds defined by min_size and max_size.

https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis

row_gap: Val

The size of the gutters between items in a vertical flexbox layout or between rows in a grid layout

Note: Values of Val::Auto are not valid and are treated as zero.

https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap

column_gap: Val

The size of the gutters between items in a horizontal flexbox layout or between column in a grid layout

Note: Values of Val::Auto are not valid and are treated as zero.

https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap

grid_auto_flow: GridAutoFlow

Controls whether automatically placed grid items are placed row-wise or column-wise. And whether the sparse or dense packing algorithm is used. Only affect Grid layouts

https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow

grid_template_rows: Vec<RepeatedGridTrack, Global>

Defines the number of rows a grid has and the sizes of those rows. If grid items are given explicit placements then more rows may be implicitly generated by items that are placed out of bounds. The sizes of those rows are controlled by grid_auto_rows property.

https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows

grid_template_columns: Vec<RepeatedGridTrack, Global>

Defines the number of columns a grid has and the sizes of those columns. If grid items are given explicit placements then more columns may be implicitly generated by items that are placed out of bounds. The sizes of those columns are controlled by grid_auto_columns property.

https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns

grid_auto_rows: Vec<GridTrack, Global>

Defines the size of implicitly created rows. Rows are created implicitly when grid items are given explicit placements that are out of bounds of the rows explicitly created using grid_template_rows.

https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows

grid_auto_columns: Vec<GridTrack, Global>

Defines the size of implicitly created columns. Columns are created implicitly when grid items are given explicit placements that are out of bounds of the columns explicitly created using grid_template_columms.

https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns

grid_row: GridPlacement

The row in which a grid item starts and how many rows it spans.

https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row

grid_column: GridPlacement

The column in which a grid item starts and how many columns it spans.

https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column

Implementations

impl Style

pub const DEFAULT: Style = Self{ display: Display::DEFAULT, position_type: PositionType::DEFAULT, left: Val::Auto, right: Val::Auto, top: Val::Auto, bottom: Val::Auto, direction: Direction::DEFAULT, flex_direction: FlexDirection::DEFAULT, flex_wrap: FlexWrap::DEFAULT, align_items: AlignItems::DEFAULT, justify_items: JustifyItems::DEFAULT, align_self: AlignSelf::DEFAULT, justify_self: JustifySelf::DEFAULT, align_content: AlignContent::DEFAULT, justify_content: JustifyContent::DEFAULT, margin: UiRect::DEFAULT, padding: UiRect::DEFAULT, border: UiRect::DEFAULT, flex_grow: 0.0, flex_shrink: 1.0, flex_basis: Val::Auto, width: Val::Auto, height: Val::Auto, min_width: Val::Auto, min_height: Val::Auto, max_width: Val::Auto, max_height: Val::Auto, aspect_ratio: None, overflow: Overflow::DEFAULT, row_gap: Val::Px(0.0), column_gap: Val::Px(0.0), grid_auto_flow: GridAutoFlow::DEFAULT, grid_template_rows: Vec::new(), grid_template_columns: Vec::new(), grid_auto_rows: Vec::new(), grid_auto_columns: Vec::new(), grid_column: GridPlacement::DEFAULT, grid_row: GridPlacement::DEFAULT,}

Trait Implementations

impl Clone for Style

fn clone(&self) -> Style

Returns a copy of the value.

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

Performs copy-assignment from source.

impl Component for Stylewhere Style: Send + Sync + 'static,

type Storage = TableStorage

A marker type indicating the storage type used for this component. This must be either TableStorage or SparseStorage.

impl Debug for Style

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

Formats the value using the given formatter.

impl Default for Style

fn default() -> Style

Returns the “default value” for a type.

impl FromReflect for Stylewhere Display: FromReflect, PositionType: FromReflect, Overflow: FromReflect, Direction: FromReflect, Val: FromReflect, Option<f32>: FromReflect, AlignItems: FromReflect, JustifyItems: FromReflect, AlignSelf: FromReflect, JustifySelf: FromReflect, AlignContent: FromReflect, JustifyContent: FromReflect, UiRect: FromReflect, FlexDirection: FromReflect, FlexWrap: FromReflect, f32: FromReflect, GridAutoFlow: FromReflect, Vec<RepeatedGridTrack, Global>: FromReflect, Vec<GridTrack, Global>: FromReflect, GridPlacement: FromReflect,

fn from_reflect(reflect: &(dyn Reflect + 'static)) -> Option<Style>

Constructs a concrete instance of Self from a reflected value.

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

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

impl GetTypeRegistration for Stylewhere Display: FromReflect, PositionType: FromReflect, Overflow: FromReflect, Direction: FromReflect, Val: FromReflect, Option<f32>: FromReflect, AlignItems: FromReflect, JustifyItems: FromReflect, AlignSelf: FromReflect, JustifySelf: FromReflect, AlignContent: FromReflect, JustifyContent: FromReflect, UiRect: FromReflect, FlexDirection: FromReflect, FlexWrap: FromReflect, f32: FromReflect, GridAutoFlow: FromReflect, Vec<RepeatedGridTrack, Global>: FromReflect, Vec<GridTrack, Global>: FromReflect, GridPlacement: FromReflect,

fn get_type_registration() -> TypeRegistration

impl PartialEq<Style> for Style

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

This method tests for self and other values to be equal, and is used by ==.

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

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

impl Reflect for Stylewhere Display: FromReflect, PositionType: FromReflect, Overflow: FromReflect, Direction: FromReflect, Val: FromReflect, Option<f32>: FromReflect, AlignItems: FromReflect, JustifyItems: FromReflect, AlignSelf: FromReflect, JustifySelf: FromReflect, AlignContent: FromReflect, JustifyContent: FromReflect, UiRect: FromReflect, FlexDirection: FromReflect, FlexWrap: FromReflect, f32: FromReflect, GridAutoFlow: FromReflect, Vec<RepeatedGridTrack, Global>: FromReflect, Vec<GridTrack, Global>: FromReflect, GridPlacement: FromReflect,

fn type_name(&self) -> &str

Returns the type name of the underlying type.

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

Returns the TypeInfo of the type represented by this value.

fn into_any(self: Box<Style, Global>) -> Box<dyn Any, Global>

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<Style, Global>) -> Box<dyn Reflect, Global>

Casts this type to a boxed reflected value.

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

Casts this type to a reflected value.

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

Casts this type to a mutable reflected value.

fn clone_value(&self) -> Box<dyn Reflect, Global>

Clones the value as a Reflect trait object.

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

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

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

Applies a reflected value to this value.

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

Returns an enumeration of “kinds” of type.

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

Returns a mutable enumeration of “kinds” of type.

fn reflect_owned(self: Box<Style, Global>) -> ReflectOwned

Returns an owned enumeration of “kinds” of type.

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

Returns a “partial equality” comparison result.

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

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

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

Debug formatter for the value.

fn serializable(&self) -> Option<Serializable<'_>>

Returns a serializable version of the value.

fn is_dynamic(&self) -> bool

Indicates whether or not this type is a dynamic type.

impl Struct for Stylewhere Display: FromReflect, PositionType: FromReflect, Overflow: FromReflect, Direction: FromReflect, Val: FromReflect, Option<f32>: FromReflect, AlignItems: FromReflect, JustifyItems: FromReflect, AlignSelf: FromReflect, JustifySelf: FromReflect, AlignContent: FromReflect, JustifyContent: FromReflect, UiRect: FromReflect, FlexDirection: FromReflect, FlexWrap: FromReflect, f32: FromReflect, GridAutoFlow: FromReflect, Vec<RepeatedGridTrack, Global>: FromReflect, Vec<GridTrack, Global>: FromReflect, GridPlacement: FromReflect,

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

Returns a reference to the value of the field named name as a &dyn Reflect.

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

Returns a mutable reference to the value of the field named name as a &mut dyn Reflect.

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

Returns a reference to the value of the field with index index as a &dyn Reflect.

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

Returns a mutable reference to the value of the field with index index as a &mut dyn Reflect.

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 clone_dynamic(&self) -> DynamicStruct

Clones the struct into a DynamicStruct.

impl TypePath for Stylewhere Display: FromReflect, PositionType: FromReflect, Overflow: FromReflect, Direction: FromReflect, Val: FromReflect, Option<f32>: FromReflect, AlignItems: FromReflect, JustifyItems: FromReflect, AlignSelf: FromReflect, JustifySelf: FromReflect, AlignContent: FromReflect, JustifyContent: FromReflect, UiRect: FromReflect, FlexDirection: FromReflect, FlexWrap: FromReflect, f32: FromReflect, GridAutoFlow: FromReflect, Vec<RepeatedGridTrack, Global>: FromReflect, Vec<GridTrack, Global>: FromReflect, GridPlacement: FromReflect,

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 moudle the type is in, or None if it is anonymous.

impl Typed for Stylewhere Display: FromReflect, PositionType: FromReflect, Overflow: FromReflect, Direction: FromReflect, Val: FromReflect, Option<f32>: FromReflect, AlignItems: FromReflect, JustifyItems: FromReflect, AlignSelf: FromReflect, JustifySelf: FromReflect, AlignContent: FromReflect, JustifyContent: FromReflect, UiRect: FromReflect, FlexDirection: FromReflect, FlexWrap: FromReflect, f32: FromReflect, GridAutoFlow: FromReflect, Vec<RepeatedGridTrack, Global>: FromReflect, Vec<GridTrack, Global>: FromReflect, GridPlacement: FromReflect,

fn type_info() -> &'static TypeInfo

Returns the compile-time info for the underlying type.

impl StructuralPartialEq for Style