bevy::ui

Struct Node

pub struct Node {Show 38 fields
    pub display: Display,
    pub position_type: PositionType,
    pub overflow: Overflow,
    pub overflow_clip_margin: OverflowClipMargin,
    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

The base component for UI entities. It describes UI layout and style properties.

When defining new types of UI entities, require Node to make them behave like UI nodes.

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.

§See also

RelativeCursorPosition to obtain the cursor position relative to this node
Interaction to obtain the interaction state of this node

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

§overflow_clip_margin: OverflowClipMargin

How the bounds of clipped content should be determined

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

§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 node = Node {
    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 node = Node {
    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 NodeCopy item path

§Flexbox

§CSS Grid

§See also

Fields§

§Example

§Example

Implementations§

impl Node

pub const DEFAULT: Node

Trait Implementations§

impl Clone for Node

fn clone(&self) -> Node

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

impl Component for Nodewhere Node: Send + Sync + 'static,

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

fn register_required_components( requiree: ComponentId, components: &mut Components, storages: &mut Storages, required_components: &mut RequiredComponents, inheritance_depth: u16, )

fn register_component_hooks(hooks: &mut ComponentHooks)

impl Debug for Node

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

impl Default for Node

fn default() -> Node

impl<'de> Deserialize<'de> for Node

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

type This<'from_arg> = &'from_arg Node

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

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

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

type This<'from_arg> = Node

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

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

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

fn ownership() -> Ownership

fn ownership() -> Ownership

fn ownership() -> Ownership

fn get_type_registration() -> TypeRegistration

fn register_type_dependencies(registry: &mut TypeRegistry)

fn into_return<'into_return>(self) -> Return<'into_return>where &Node: 'into_return,

fn into_return<'into_return>(self) -> Return<'into_return>where &mut Node: 'into_return,

fn into_return<'into_return>(self) -> Return<'into_return>where Node: 'into_return,

impl PartialEq for Node

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

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

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

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

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

fn reflect_kind(&self) -> ReflectKind

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

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

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

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

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

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

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

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

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

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

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

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

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

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

fn is_dynamic(&self) -> bool

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

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

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

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

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

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

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

impl Serialize for Node

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

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

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

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

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

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

fn field_len(&self) -> usize

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

fn clone_dynamic(&self) -> DynamicStruct

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

Struct Node

impl Component for Node
where Node: Send + Sync + 'static,

fn deserialize<D>( deserializer: D, ) -> Result<Node, <D as Deserializer<'de>>::Error>
where __D: Deserializer<'de>,

fn into_return<'into_return>(self) -> Return<'into_return>
where &Node: 'into_return,

fn into_return<'into_return>(self) -> Return<'into_return>
where &mut Node: 'into_return,

fn into_return<'into_return>(self) -> Return<'into_return>
where Node: 'into_return,

fn serialize<S>( &self, serializer: S, ) -> Result<<S as Serializer>::Ok, <S as Serializer>::Error>
where S: Serializer,

impl TypePath for Node
where Node: 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> CloneToUninit for T
where T: Clone,

fn conv<T>(self) -> T
where Self: Into<T>,

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,