Version: 2019.1
The Visual Tree
The UXML format

The Layout Engine

UIElements includes a layout engine that positions visual elements based on layout and styling properties. The layout engine is the Yoga open source project that implements a subset of Flexbox: a HTML/CSS layout system.

To get started with Yoga and Flexbox, consult the following external resources:

By default, all visual elements are part of the layout. The layout has the following default behaviours:

  • A container distributes its children vertically.
  • The position of a container rectangle includes its children rectangles. This behaviour can be restricted by other layout properties.
  • A visual element with text uses the text size in its size calculations. This behaviour can be restricted by other layout properties.

UIElements include built-in controls for standard UI controls such as button, toggle, text field, or label. These built-in controls have styles that affect their layout.

The following list provides tips on how to use the layout engine:

  • Set the width and height to define the size of an element.

  • Use the flexGrow property (in USS: flex-grow: <value>;) to assign a flexible size to an element. The value of the flexGrow property acts as weighting when the size of an element is determined by its siblings.

  • Set the flexDirection property to row (in USS: flex-direction: row;) to switch to a horizontal layout.

  • Use relative positioning to offset an element based on its original layout position.

  • Set the position property to absolute to place an element relative to its parent position rectangle. In this case, it does not affect the layout of its siblings or parent.

The Visual Tree
The UXML format