Container Element
The Container Element is the most fundamental building block in the UI Editor. It’s an invisible “box” used to group, position, and transform nested child elements. By nesting elements inside a Container, you can apply transforms, modifiers, and triggers at the group level, making complex layouts and interactions far easier to manage.
When to Use a Container Element
- Layout Grouping: Organize related UI elements (e.g. button + icon + label) into a single logical unit.
- Property Modifiers & Triggers: Attach visibility, position, or interactivity changes to a group rather than repeating them per element.
- Hierarchical Transforms: Apply transformations like moving, rotating, or scaling to an entire group of children at once.
- Masking & Clipping: Use as the masked parent for child content (in combination with a LinearGradient “mask” child).
Container Element Properties
| Property | Type | Details |
|---|---|---|
| Name | text | Name of the element. Make sure the name of the element is unique if the element needs to be accessible from code (Enterprise Plan only). |
| Cache As Bitmap | checkbox | Use to enable or disable the cache-as-bitmap optimization, which optimizes rendering by rendering all child elements as a single image. |
| Alpha Filter | checkbox | Use to enable or disable the alpha filter. The alpha filter is useful for applying alpha evenly across the entire display object and any opaque elements it contains. |
| Anchor | .% | Used to position the anchor point of the element (x: 0, y: 0 = top/left, x: 1, y: 1 = bottom/right) |
| Parent Align | .% | Position of the element relative to its parent’s position. (x: 0, y: 0 = top/left, x: 1, y: 1 = bottom/right) |
| Parent Size | .% | Use to resize the element relative to its parent's size (x: 1, y: 1 = match parent size, x: 0.5, y: 0.5 = half of parent size, x: 0, y: 0 = disables parent relative sizing). |
| Size | px | Explicitly set pixel size (logical screen units). |
| Offset | px | Additional pixel offset from the element's position. |
Transform Properties
Transform properties affect the Element, as well as any child elements nested within the Element.
| Property | Type | Notes |
|---|---|---|
| Pivot | .% | Pivot point for any transformations applied to the element. (x: 0, y: 0 = top/left, x: 0.5, y: 0.5 = center, x: 1, y: 1 = bottom/right). |
| Angle | Degrees | Rotate the element around its Pivot point. |
| Skew | Degrees | Skew along X/Y axes around the Pivot point. |
| Scale | .% | Percentage scale of the element. Setting this value to x: 2, y: 2 scales the element twice as large. |
| Alpha | .% | Transparency applied to the element. The default value 1 displays the element fully opaque, while 0.5 would make the element semi-transparent. Setting the value to 0 makes the element completely disappear. |
Modifiers
Modifiers are vital to creating different visual states for your elements in the UI Editor. They allow you to set up visual state changes and transitions using various properties such as size, position, alpha, etc.
Sounds
Sounds are very similar to Modifiers, but instead of creating visual effects, they create sound effects which can be triggered using Events.
Triggers
Triggers allow you to add interactivity to your QSApp by enabling the ability to trigger modifiers and events when the trigger is activated. You can add triggers for actions like clicking, hovering, and dragging elements.
Filters
Filters apply shading and post-processing visual effects to a Container and all of its nested child elements. Filters can only be applied to Container elements, and they are a powerful tool for increasing the visual appeal of your QSApp.