Introduction
The Text component is used to display various forms of text units. It supports dynamic font loading and can connect to real-time data sources, making it suitable for a wide range of applications.
Examples of Text Property Configurations
Frame Block
The Frame attributes of the Text component are the same as those of the Rect component. For details, refer to the Rect component’s Frame section.
Properties Block
The Properties of the Text component share basic attributes with the Rect component, such as Opacity and Background Color. For details, refer to the Rect component’s Properties section.
Additional Properties
Property Name | Property Type | Description |
Text | One Of
One Of (String / Number / Datetime) | The text content of the brick Set the text content displayed inside the Text component. |
Color | String String | The background color of the brick. Users can select a color from the color panel or specify the color with HEX, RGBA, or HSLA. Set the text color of the component. Users can select a color from the color panel or specify it with HEX, RGBA, or HSLA values. |
Font Weight | One Of List | The font-weight of the text content. There are Normal, Bold, and other font-weight choices ranging from 100 to 900. Set the font weight of the text. Options include Normal, Bold, or numeric weights ranging from 100 to 900. |
Font Family | String String | The font style of the text content. Users can specify the font family with its name. Note that the user will have to download the font style if it is not already installed on the device. Set the font family of the text. Enter the font name directly to apply it. If the font is not installed on the device, go to Setup → Load Fonts, and enter the font name, download link, and MD5 so the device can automatically download it. |
Font Size Vector | Number (between 0 and 1) Number (0–1) | The font size of the text content is determined by Font Size Vector, which is a value specifying the ratio of the text's height to the line's height. A value of 0.5 resembles the double-spaced style. Set the ratio of each line’s height within the Text component. For example, a value of 0.5 creates a double-spaced effect. |
Line Number | Number Number | Line number specifies the maximum number of lines in a text brick. A value of five means that the brick will be horizontally divided into five segments. Set the maximum number of lines for the Text component. |
Text Align | One Of List | The horizontal alignment of the text: left, right, center, or justify. 設定文字元件在方塊中水平對齊方法。 right: 文字置右 center: 文字置中 justify: 文字左右分散對齊 |
Text Align Vertical | One Of List | The vertical alignment of the text: top, bottom, or center. Set the horizontal alignment of the text within the component.
|
Replace Rules | Array Of
Array Of (Regex String + Replace String) | The replacement rule of the text string. For example, confidential information can be replaced with *. Rules are specified with Regular Expressions (Regex). Define replacement rules for the text. For example, sensitive information can be masked with |
// Teaching examples for Line Number and Font Size Vector usage
Properties - Border
The border attributes are the same as those of the Rect component. For details, refer to the Rect component’s Border section.
Animations
The animation event attributes are the same as those of the Rect component. For details, refer to the Rect component’s Animation section.
Before Value Change | Animation that will be triggered right before the value of the text changes. Animation triggered right before the text value changes. |
Value Change | Animation that will be triggered after the value of the text changes. Animation triggered after the text value changes and the Before Value Change animation (if any) has completed. |
// Link to Animation tutorial
Events
The event attributes are the same as those of the Rect component. For details, refer to the Rect component’s Event section.
Before Value Change | Event that will be triggered right before the value of the text changes. vent triggered right before the text value changes, after the Before Value Change animation (if any) has completed. |
Value Change | Event that will be triggered after the value of the text changes. Event triggered after the text value changes and both the Before Value Change and Value Change animations (if any) have completed. |
// Link to Event tutorial