Text Element
Text Elements render styled, multi-line text in your UI Editor layout. Use Text Elements when you need rich typographic control and your text updates infrequently.
When to Use a Text Element
- Rich Styling
Advanced fonts, sizes, alignment, and fill options. - Localization
Multi-line text with variable lengths—wrapping and alignment options. - Non-dynamic
Situations where the text does not need to update frequently.
Text 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). |
| Text | text | The text to display. |
| Tint | Color picker | Tint color of the element. Use to change the color overlay of the text. Default (white) has no effect on the color. |
| 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. |
Text Style Properties
Text Style Properties are used to apply text styles to the element, such as font, alignment, and size.
| Property | Type | Notes |
|---|---|---|
| Font | File picker | Font file path to use for the text. Must be Font (.fnt) file type. |
| Size | px | Font size in logical pixel units. |
| Align | Dropdown | Alignment for multiline text. Does not affect single line text. |
Fill
The Fill section allows you to add a linear gradient effect to your text. This section is optional, if not added the default behavior is a solid color.
| Property | Type | Notes |
|---|---|---|
| Color | Color picker list | Colors that your text will use. Adding multiple colors will add a linear gradient effect to your text, with the first item being the top color, and the last item being the bottom color. |
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.