Text
The Text component allows App Studio users to enter any text in their app and end-users of the app to see the displayed text.
Example
You can use the Text component to create headings and subheadings in your app:
- Heading with templating
- Body text
- Subheading
Note: The Text component follows the WCAG 2.0 AA accessibility guidelines.
Properties
The following Text component properties are available:
Main
Property | Description | Required |
---|---|---|
Component ID | Enter a unique name for the component. See Templating in components for more details. | Yes |
Text | Enter the text you want to display. You can use templating. | No |
Note: See Templating drop-down for more details on rendering dynamic content using Liquid.
Styles
Property | Description | Required |
---|---|---|
Variant | Select the appearance from the drop-down menu. | No |
Font size | Select the font size from the drop-down menu. | No |
Font weight | Select the font weight from the drop-down menu. | No |
Text align | Select the text alignment to the canvas from the drop-down menu. | No |
Color | Select the colour according to the text function from the drop-down menu. | No |
Interactions
Property | Description | Required |
---|---|---|
Hidden | Select the checkbox to hide the component in the end-user app. To hide it in the canvas, use the eye icon in the Layers panel. | No |
Add rule | You can set rules to hide the component using Liquid. If no rules are set, the component will be hidden in all instances. | No |
Note: See Add rules to trigger properties for more information on setting rules for these properties.
Accessibility
Property | Description | Required |
---|---|---|
Title | Enter a text that is displayed as a tooltip when hovering the mouse over the component in the end-user app. | No |