Layouts
Layout components define the size, position, and simple styling of other components.
Currently, we support the following layout components:
View(TypeScript)Tiles(TypeScript)Rescaler(TypeScript)
Common properties
Most layout components share some of the properties related to its position and size in relation to their parent.
Sizing
width- Width of a component in pixels.height- Height of a component in pixels.
If not specified explicitly, sizing of the layout components varies depending on their parent and position in the component tree, as detailed in the table below:
| Layout component placement | Layout component size |
|---|---|
| Root in a component tree | Size is based on the declared resolution of an output stream. |
| Child of a non-layout component | Defining size is required, usually via the width/height fields |
| Statically positioned child of another layout component | Size will be based on the area defined by its parent unless explicitly defined. |
| Absolutely positioned child of another layout component | The same size as parent. |
Absolute positioning
top- Distance in pixels from the top edge of a component to the top edge of its parent component.bottom- Distance in pixels from the bottom edge of a component to the bottom edge of its parent component.left- Distance in pixels from the left edge of a component to the left edge of its parent component.right- Distance in pixels from the right edge of a component to the right edge of its parent component.rotation- Rotation in degrees. (Caution: rotation of complex elements is not fully supported yet)
All the properties above imply the absolute positioning of a component.
When a component is positioned absolutely, it will ignore the normal layout of its parent.