Struct Node

Source

pub struct Node {Show 39 fields
    pub display: Display,
    pub box_sizing: BoxSizing,
    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

§box_sizing: BoxSizing

Which part of a Node’s box length styles like width and height control

BoxSizing::BorderBox: They refer to the “border box” size (size including padding and border)
BoxSizing::ContentBox: They refer to the “content box” size (size excluding padding and border)

BoxSizing::BorderBox is generally considered more intuitive and is the default in Bevy even though it is not on the web.

See: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

§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 width (if the main axis is horizontal) or height (if the main axis is vertical) when both are set, but it obeys the constraints defined by min_width/min_height and max_width/max_height.

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 Node Copy 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

type Mutability = Mutable

fn register_required_components( requiree: ComponentId, components: &mut ComponentsRegistrator<'_>, required_components: &mut RequiredComponents, inheritance_depth: u16, recursion_check_stack: &mut Vec<ComponentId>, )

fn clone_behavior() -> ComponentCloneBehavior

fn register_component_hooks(hooks: &mut ComponentHooks)

fn on_add() -> Option<for<'w> fn(DeferredWorld<'w>, HookContext)>

fn on_insert() -> Option<for<'w> fn(DeferredWorld<'w>, HookContext)>

fn on_replace() -> Option<for<'w> fn(DeferredWorld<'w>, HookContext)>

fn on_remove() -> Option<for<'w> fn(DeferredWorld<'w>, HookContext)>

fn on_despawn() -> Option<for<'w> fn(DeferredWorld<'w>, HookContext)>

fn map_entities<E>(_this: &mut Self, _mapper: &mut E)where E: EntityMapper,

impl Debug for Node

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

impl Default for Node

fn default() -> Node

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

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

fn get_type_registration() -> TypeRegistration

fn register_type_dependencies(registry: &mut TypeRegistry)

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 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 reflect_clone(&self) -> Result<Box<dyn Reflect>, ReflectCloneError>

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

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

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

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

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

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

fn clone_dynamic(&self) -> DynamicStruct

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

impl TypePath for Nodewhere Node: 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>

Struct Node

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

fn map_entities<E>(_this: &mut Self, _mapper: &mut E)
where E: EntityMapper,

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,

impl<C> BundleFromComponents 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,

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

impl<T> DowncastSend for T
where T: Any + Send,

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

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

impl<T> DynamicTyped for T
where T: Typed,

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,