Struct bevy_ui::Style

source ·

pub struct Style {Show 38 fields
    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>,
    pub grid_template_columns: Vec<RepeatedGridTrack>,
    pub grid_auto_rows: Vec<GridTrack>,
    pub grid_auto_columns: Vec<GridTrack>,
    pub grid_row: GridPlacement,
    pub grid_column: GridPlacement,
}

Expand description

Describes the style of a UI container node

Nodes 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 Flexbox
A Complete Guide To Flexbox by CSS Tricks. This is detailed guide with illustrations and comprehensive written explanation of the different Flexbox properties and how they work.
Flexbox Froggy. An interactive tutorial/game that teaches the essential parts of Flexbox in a fun engaging way.

CSS Grid

MDN: Basic Concepts of Grid Layout
A Complete Guide To CSS Grid by CSS Tricks. This is detailed guide with illustrations and comprehensive 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 its 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 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 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

Used to control how each individual item is aligned by default within the space they’re given.

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 overridden if AlignSelf on the child node is set.

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

§justify_items: JustifyItems

Used to control how each individual item is aligned by default within the space they’re given.

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 overridden if JustifySelf on the child node is set.

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

§align_self: AlignSelf

Used to control how the specified item is aligned within the space it’s given.

For Flexbox items, controls cross axis alignment of the item.
For CSS Grid items, controls block (vertical) axis alignment of a grid item within its 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

Used to control how the specified item is aligned within the space it’s given.

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 its 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-self

§align_content: AlignContent

Used to control how items are distributed.

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 containers, controls alignment of grid rows.

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

§justify_content: JustifyContent

Used to control how items are distributed.

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.

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 on Grid nodes.

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

§flex_wrap: FlexWrap

Whether a Flexbox container should wrap its contents onto multiple lines if they overflow. This property has no effect on 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 as well as whether the sparse or dense packing algorithm is used. Only affects Grid layouts.

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

§grid_template_rows: Vec<RepeatedGridTrack>

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>

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>

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>

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_columns.

https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-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

Struct bevy_ui::Style

Fields§

Implementations§

impl Style

pub const DEFAULT: Self = _

Trait Implementations§

impl Clone for Style

fn clone(&self) -> Style

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

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

type Storage = TableStorage

impl Debug for Style

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

impl Default for Style

fn default() -> Self

fn from_reflect(reflect: &dyn Reflect) -> Option<Self>

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

fn get_type_registration() -> TypeRegistration

impl PartialEq for Style

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

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

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

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

fn as_any(&self) -> &dyn Any

fn as_any_mut(&mut self) -> &mut dyn Any

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

fn as_reflect(&self) -> &dyn Reflect

fn as_reflect_mut(&mut self) -> &mut dyn Reflect

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

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

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

fn reflect_kind(&self) -> ReflectKind

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

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

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

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

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

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

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

fn is_dynamic(&self) -> bool

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

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

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

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

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

fn field_len(&self) -> usize

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

fn clone_dynamic(&self) -> DynamicStruct

impl TypePath for Stylewhere Self: Any + Send + Sync,

fn type_path() -> &'static str

fn short_type_path() -> &'static str

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

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

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

fn type_info() -> &'static TypeInfo

impl StructuralPartialEq for Style

Auto Trait Implementations§

impl RefUnwindSafe for Style

impl Send for Style

impl Sync for Style

impl Unpin for Style

impl UnwindSafe for Style

Blanket Implementations§

impl<T> Any for Twhere T: 'static + ?Sized,

fn type_id(&self) -> TypeId

impl<T, U> AsBindGroupShaderType<U> for Twhere U: ShaderType, &'a T: for<'a> Into<U>,

fn as_bind_group_shader_type(&self, _images: &RenderAssets<Image>) -> U

impl<T> Borrow<T> for Twhere T: ?Sized,

fn borrow(&self) -> &T

impl<T> BorrowMut<T> for Twhere T: ?Sized,

fn borrow_mut(&mut self) -> &mut T

impl<C> Bundle for Cwhere C: Component,

fn component_ids( components: &mut Components, storages: &mut Storages, ids: &mut impl FnMut(ComponentId) )

unsafe fn from_components<T, F>(ctx: &mut T, func: &mut F) -> Cwhere F: for<'a> FnMut(&'a mut T) -> OwningPtr<'a>,

impl<T> Downcast<T> for T

fn downcast(&self) -> &T

impl<T> Downcast for Twhere T: Any,

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

fn into_any_rc(self: Rc<T>) -> Rc<dyn Any>

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

impl Component for Style
where Self: Send + Sync + 'static,

impl TypePath for Style
where Self: Any + Send + Sync,

impl<T> Any for T
where T: 'static + ?Sized,

impl<T, U> AsBindGroupShaderType<U> for T
where U: ShaderType, &'a T: for<'a> Into<U>,

impl<T> Borrow<T> for T
where T: ?Sized,

impl<T> BorrowMut<T> for T
where T: ?Sized,

impl<C> Bundle for C
where C: Component,

unsafe fn from_components<T, F>(ctx: &mut T, func: &mut F) -> C
where F: for<'a> FnMut(&'a mut T) -> OwningPtr<'a>,

impl<T> Downcast for T
where T: Any,

impl<T> DowncastSync for T
where T: Any + Send + Sync,

impl<C> DynamicBundle for C
where C: Component,

impl<T> DynamicTypePath for T
where T: TypePath,

impl<T> FromWorld for T
where T: Default,

impl<S> GetField for S
where S: Struct,

fn get_field<T>(&self, name: &str) -> Option<&T>
where T: Reflect,

fn get_field_mut<T>(&mut self, name: &str) -> Option<&mut T>
where T: Reflect,

impl<T> GetPath for T
where T: Reflect + ?Sized,

fn path<'p, T>( &self, path: impl ReflectPath<'p> ) -> Result<&T, ReflectPathError<'p>>
where T: Reflect,

fn path_mut<'p, T>( &mut self, path: impl ReflectPath<'p> ) -> Result<&mut T, ReflectPathError<'p>>
where T: Reflect,

impl<T, U> Into<U> for T
where U: From<T>,

impl<T> ToOwned for T
where T: Clone,

impl<T, U> TryFrom<U> for T
where U: Into<T>,

impl<T, U> TryInto<U> for T
where U: TryFrom<T>,

impl<T> TypeData for T
where T: 'static + Send + Sync + Clone,

fn with_subscriber<S>(self, subscriber: S) -> WithDispatch<Self>
where S: Into<Dispatch>,

impl<T> Settings for T
where T: 'static + Send + Sync,

impl<T> WasmNotSend for T
where T: Send,

impl<T> WasmNotSendSync for T
where T: WasmNotSend + WasmNotSync,

impl<T> WasmNotSync for T
where T: Sync,