Node

Node

• display : bevy_ui::ui_node::Display
• position_type : bevy_ui::ui_node::PositionType
• overflow : bevy_ui::ui_node::Overflow
• overflow_clip_margin : bevy_ui::ui_node::OverflowClipMargin
• left : bevy_ui::geometry::Val
• right : bevy_ui::geometry::Val
• top : bevy_ui::geometry::Val
• bottom : bevy_ui::geometry::Val
• width : bevy_ui::geometry::Val
• height : bevy_ui::geometry::Val
• min_width : bevy_ui::geometry::Val
• min_height : bevy_ui::geometry::Val
• max_width : bevy_ui::geometry::Val
• max_height : bevy_ui::geometry::Val
• aspect_ratio : core::option::Option
• align_items : bevy_ui::ui_node::AlignItems
• justify_items : bevy_ui::ui_node::JustifyItems
• align_self : bevy_ui::ui_node::AlignSelf
• justify_self : bevy_ui::ui_node::JustifySelf
• align_content : bevy_ui::ui_node::AlignContent
• justify_content : bevy_ui::ui_node::JustifyContent
• margin : bevy_ui::geometry::UiRect
• padding : bevy_ui::geometry::UiRect
• border : bevy_ui::geometry::UiRect
• flex_direction : bevy_ui::ui_node::FlexDirection
• flex_wrap : bevy_ui::ui_node::FlexWrap
• flex_grow : f32
• flex_shrink : f32
• flex_basis : bevy_ui::geometry::Val
• row_gap : bevy_ui::geometry::Val
• column_gap : bevy_ui::geometry::Val
• grid_auto_flow : bevy_ui::ui_node::GridAutoFlow
• grid_template_rows : alloc::vec::Vec<bevy_ui::ui_node::RepeatedGridTrack>
• grid_template_columns : alloc::vec::Vec<bevy_ui::ui_node::RepeatedGridTrack>
• grid_auto_rows : alloc::vec::Vec<bevy_ui::ui_node::GridTrack>
• grid_auto_columns : alloc::vec::Vec<bevy_ui::ui_node::GridTrack>
• grid_row : bevy_ui::ui_node::GridPlacement
• grid_column : bevy_ui::ui_node::GridPlacement

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

Functions