Struct Node 

pub struct Node {

    pub display: Display,
    pub box_sizing: BoxSizing,
    pub position_type: PositionType,
    pub overflow: Overflow,
    pub scrollbar_width: f32,
    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,
}

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

scrollbar_width: f32

How much space in logical pixels should be reserved for scrollbars when overflow is set to scroll or auto on an axis.

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

Implementations

impl Node

pub const DEFAULT: Node

Trait Implementations

impl Clone for Node

fn clone(&self) -> Node

Returns a duplicate of the value.

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

Performs copy-assignment from source.

impl Component for Node

where Node: Send + Sync + 'static,

Required Components: ComputedNode, ComputedUiTargetCamera, ComputedUiRenderTargetInfo, UiTransform, BackgroundColor, BorderColor, BorderRadius, FocusPolicy, ScrollPosition, Visibility, ZIndex.

A component’s Required Components are inserted whenever it is inserted. Note that this will also insert the required components of the required components, recursively, in depth-first order.

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

A constant indicating the storage type used for this component.

type Mutability = Mutable

A marker type to assist Bevy with determining if this component is mutable, or immutable. Mutable components will have Component<Mutability = Mutable>, while immutable components will instead have Component<Mutability = Immutable>.

fn register_required_components( _requiree: ComponentId, required_components: &mut RequiredComponentsRegistrator<'_, '_>, )

Registers required components.

fn clone_behavior() -> ComponentCloneBehavior

Called when registering this component, allowing to override clone function (or disable cloning altogether) for this component.

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

Gets the on_add ComponentHook for this Component if one is defined.

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

Gets the on_insert ComponentHook for this Component if one is defined.

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

Gets the on_replace ComponentHook for this Component if one is defined.

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

Gets the on_remove ComponentHook for this Component if one is defined.

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

Gets the on_despawn ComponentHook for this Component if one is defined.

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

where E: EntityMapper,

Maps the entities on this component using the given EntityMapper. This is used to remap entities in contexts like scenes and entity cloning. When deriving Component, this is populated by annotating fields containing entities with #[entities]

impl Debug for Node

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

Formats the value using the given formatter.

impl Default for Node

fn default() -> Node

Returns the “default value” for a type.

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

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

where __D: Deserializer<'de>,

Deserialize this value from the given Serde deserializer.

impl FromReflect for Node

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

Constructs a concrete instance of Self from a reflected value.

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

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

impl GetTypeRegistration for Node

fn get_type_registration() -> TypeRegistration

Returns the default TypeRegistration for this type.

fn register_type_dependencies(registry: &mut TypeRegistry)

Registers other types needed by this type.

impl PartialEq for Node

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

Tests for self and other values to be equal, and is used by ==.

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

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

impl PartialReflect for Node

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

Returns the TypeInfo of the type represented by this value.

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

Tries to apply a reflected value to this value.

fn reflect_kind(&self) -> ReflectKind

Returns a zero-sized enumeration of “kinds” of type.

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

Returns an immutable enumeration of “kinds” of type.

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

Returns a mutable enumeration of “kinds” of type.

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

Returns an owned enumeration of “kinds” of type.

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

Attempts to cast this type to a boxed, fully-reflected value.

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

Attempts to cast this type to a fully-reflected value.

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

Attempts to cast this type to a mutable, fully-reflected value.

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

Casts this type to a boxed, reflected value.

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

Casts this type to a reflected value.

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

Casts this type to a mutable, reflected value.

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

Returns a “partial equality” comparison result.

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

Debug formatter for the value.

fn reflect_clone(&self) -> Result<Box<dyn Reflect>, ReflectCloneError>

Attempts to clone Self using reflection.

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

Applies a reflected value to this value.

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

Converts this reflected value into its dynamic representation based on its kind.

fn reflect_clone_and_take<T>(&self) -> Result<T, ReflectCloneError>

where T: 'static, Self: Sized + TypePath,

For a type implementing PartialReflect, combines reflect_clone and take in a useful fashion, automatically constructing an appropriate ReflectCloneError if the downcast fails.

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

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

fn is_dynamic(&self) -> bool

Indicates whether or not this type is a dynamic type.

impl Reflect for Node

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

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<Node>) -> Box<dyn Reflect>

Casts this type to a boxed, fully-reflected value.

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

Casts this type to a fully-reflected value.

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

Casts this type to a mutable, fully-reflected value.

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

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

impl Serialize for Node

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

where __S: Serializer,

Serialize this value into the given Serde serializer.

impl Struct for Node

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

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

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

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

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

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

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

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

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

Creates a new DynamicStruct from this struct.

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

Will return None if TypeInfo is not available.

impl TypePath for Node

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

impl Typed for Node

fn type_info() -> &'static TypeInfo

Returns the compile-time info for the underlying type.

impl StructuralPartialEq for Node