Crate ui 

This crate contains Bevy’s UI system, which can be used to create UI for both 2D and 3D games

Basic usage

Spawn UI elements with widget::Button, ImageNode, Text and Node This UI is laid out with the Flexbox and CSS Grid layout models (see https://cssreference.io/flexbox/)

Modules

debug

experimental

Experimental features are not yet stable and may change or be removed in the future.

gradients

interaction_states

measurement

prelude

The UI prelude.

ui_transform

update

This module contains systems that update the UI when something changes

widget

This module contains the basic building blocks of Bevy’s UI

Structs

AngularColorStop

An angular color stop for a conic gradient

BackgroundColor

The background color of the node

BackgroundGradient

A UI node that displays a gradient

BorderColor

The border color of the UI node.

BorderGradient

A UI node border that displays a gradient

BorderRadius

Used to add rounded corners to a UI node. You can set a UI node to have uniformly rounded corners or specify different radii for each corner. If a given radius exceeds half the length of the smallest dimension between the node’s height or width, the radius will calculated as half the smallest dimension.

BoxShadow

List of shadows to draw for a Node.

CalculatedClip

The calculated clip of the node

Checkable

Component that indicates that a widget can be checked.

Checked

Component that indicates whether a checkbox or radio button is in a checked state.

ColorStop

A color stop for a gradient

ComputedNode

Provides the computed size and layout properties of the node.

ComputedUiRenderTargetInfo

Derived information about the render target for this UI node.

ComputedUiTargetCamera

Derived information about the camera target for this UI node.

ConicGradient

A conic gradient

ContentSize

A node with a ContentSize component is a node where its size is based on its content.

DefaultUiCamera

FixedMeasure

A FixedMeasure is a Measure that ignores all constraints and always returns the same size.

GlobalZIndex

GlobalZIndex allows a Node entity anywhere in the UI hierarchy to escape the implicit draw ordering of the UI’s layout tree and be rendered above or below other UI nodes. Nodes with a GlobalZIndex of greater than 0 will be drawn on top of nodes without a GlobalZIndex or nodes with a lower GlobalZIndex. Nodes with a GlobalZIndex of less than 0 will be drawn below nodes without a GlobalZIndex or nodes with a greater GlobalZIndex.

GridPlacement

Represents the position of a grid item in a single axis.

GridTrack

A GridTrack is a Row or Column of a CSS Grid. This struct specifies what size the track should be. See below for the different “track sizing functions” you can specify.

InteractionDisabled

A component indicating that a widget is disabled and should be “grayed out”. This is used to prevent user interaction with the widget. It should not, however, prevent the widget from being updated or rendered, or from acquiring keyboard focus.

IsDefaultUiCamera

Marker used to identify default cameras, they will have priority over the PrimaryWindow camera.

LayoutConfig

This component can be added to any UI node to modify its layout behavior.

LayoutContext

LinearGradient

A linear gradient

MeasureArgs

Node

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

NodeQuery

Main query for ui_focus_system

NodeQueryItem

Automatically generated WorldQuery item type for NodeQuery, returned when iterating over query results.

NodeQueryReadOnly

Automatically generated WorldQuery type for a read-only variant of NodeQuery.

NodeQueryReadOnlyItem

Automatically generated WorldQuery item type for NodeQueryReadOnly, returned when iterating over query results.

Outline

The Outline component adds an outline outside the edge of a UI node. Outlines do not take up space in the layout.

Overflow

Whether to show or hide overflowing items

OverflowClipMargin

The bounds of the visible area when a UI node is clipped.

OverrideClip

UI node entities with this component will ignore any clipping rect they inherit, the node will not be clipped regardless of its ancestors’ Overflow setting.

Pressed

Component that indicates whether a button or widget is currently in a pressed or “held down” state.

RadialGradient

A radial gradient

RelativeCursorPosition

A component storing the position of the mouse relative to the node, (0., 0.) being the center and (0.5, 0.5) being the bottom-right If the mouse is not over the node, the value will go beyond the range of (-0.5, -0.5) to (0.5, 0.5)

RepeatedGridTrack

Represents a possibly repeated GridTrack.

ResolvedBorderRadius

Represents the resolved border radius values for a UI node.

ScrollPosition

The scroll position of the node. Values are in logical pixels, increasing from top-left to bottom-right.

ShadowStyle

State

Contains entities whose Interaction should be set to None

UiGlobalTransform

Absolute 2D transform for UI nodes

UiPlugin

The basic plugin for Bevy UI

UiPosition

Responsive position relative to a UI node.

UiRect

A type which is commonly used to define margins, paddings and borders.

UiScale

The current scale of the UI.

UiStack

The current UI stack, which contains all UI nodes ordered by their depth (back-to-front).

UiTargetCamera

Indicates that this root Node entity should be rendered to a specific camera.

UiTransform

Relative 2D transform for UI nodes

Val2

A pair of Vals used to represent a 2-dimensional size or offset.

ZIndex

Indicates that this Node entity’s front-to-back ordering is not controlled solely by its location in the UI hierarchy. A node with a higher z-index will appear on top of sibling nodes with a lower z-index.

Enums

AlignContent

Used to control how items are distributed.

AlignItems

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

AlignSelf

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

AvailableSpace

The amount of space available to a node in a given axis https://www.w3.org/TR/css-sizing-3/#available

BoxSizing

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

Display

Defines the layout model used by this node.

FlexDirection

Defines how flexbox items are ordered within a flexbox

FlexWrap

Defines if flexbox items appear on a single line or on multiple lines

FocusPolicy

Describes whether the node should block interactions with lower nodes

Gradient

GridAutoFlow

Controls whether grid items are placed row-wise or column-wise as well as whether the sparse or dense packing algorithm is used.

GridPlacementError

Errors that occur when setting constraints for a GridPlacement

GridTrackRepetition

How many times to repeat a repeated grid track

Interaction

Describes what type of input interaction has occurred for a UI node.

InterpolationColorSpace

The color space used for interpolation.

JustifyContent

Used to control how items are distributed.

JustifyItems

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

JustifySelf

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

LayoutError

MaxTrackSizingFunction

MinTrackSizingFunction

NodeMeasure

A type to serve as Taffy’s node context (which allows the content size of leaf nodes to be computed)

OverflowAxis

Whether to show or hide overflowing items

OverflowClipBox

Used to determine the bounds of the visible area when a UI node is clipped.

PositionType

The strategy used to position this node

RadialGradientShape

UiSystems

The label enum labeling the types of systems in the Bevy UI

Val

Represents the possible value types for layout properties.

ValArithmeticError

ValParseError

Traits

InColorSpace

Set the color space used for interpolation.

Measure

A Measure is used to compute the size of a ui node when the size of that node is based on its content.

ValNum

All the types that should be able to be used in the Val enum should implement this trait.

Functions

auto

Returns a Val::Auto where the value is automatically determined based on the context and other Node properties.

clip_check_recursive

Walk up the tree child-to-parent checking that point is not clipped by any ancestor node. If entity has an OverrideClip component it ignores any inherited clipping and returns true.

percent

Returns a Val::Percent representing a percentage of the parent node’s length along a specific axis.

px

Returns a Val::Px representing a value in logical pixels.

ui_focus_system

The system that sets Interaction for all UI elements based on the mouse cursor activity

ui_layout_system

Updates the UI’s layout tree, computes the new layout geometry and then updates the sizes and transforms of all the UI nodes.

vh

Returns a Val::Vh representing a percentage of the viewport height.

vmax

Returns a Val::VMax representing a percentage of the viewport’s larger dimension.

vmin

Returns a Val::VMin representing a percentage of the viewport’s smaller dimension.

vw

Returns a Val::Vw representing a percentage of the viewport width.

Type Aliases

UiSystemDeprecated

Deprecated alias for UiSystems.