Text
Check out the standard help for an overview of the text component.
API Examples
// Internally the component is known as "text"
var textComponent1 = findComponent("My Page", "text", "myTextComponent"); // To retrieve a text component called "myTextComponent" on a page called "My Page"
var textComponent2 = findComponentInForeground("My Foreground", "text", "myTextComponent"); // To retrieve a text component in the foreground.
var textComponent3 = createComponent(parentComponent, "text", 0, 0, 100, 100); // to create a text component inside a custom component.
// Retrieving a property
var color = getProperty(textComponent1, "font_color");
console.log(color);
//Setting a property
setProperty(textComponent1, "font_color", "0xFF0000FF"); // sets to red
// Binding an event
bindEvent(textComponent3, "on_press", "action");
function action(){
console.log("hello world");
}Properties
See the shared property list for all properties available for this component.
| Property | Type | Description |
|---|---|---|
| text | string | The text on the text component |
| rich_text | bool | Uses Rich Text Format when enabled |
| multiline | bool | Enables multiple lines on the component |
| ellipsis | bool | When true, and if “Resize to Content” property is enabled, an ellipsis (…) will appear when the text doesn’t fit inside the component |
| tracking | number | Distance between characters |
| line_spacing | number ( > 0 ) | Vertical spacing between lines |
| center_vertical | bool | Vertically centers the text when enabled |
| font_color | string (0x000000 – 0xFFFFFFFF) | A Hex string in the form of RGBA (Red, Green, Blue, Alpha). E.g 0xFF0000FF will be red with 100% opacity |
| font_size | number ( > 0 ) | The size of the font. Decimal values are allowed |
| font_filename | string | The filename of a font inside the /fonts folder (e.g vera.ttf). If the font isn’t found the text will disappear |
| text_height | number | Ready Only – Gets the height of the text in pixels. Note: This is not the component height, but the text height itself! |
| font_align | number (0-3) | The horizontal alignment of the text 0 – left 1 – Center 2 – Right 3 – Full Justify |
| resize_type | number (0-1) | The resize type of the component 0 – mm 1 – scale with screen |
Events
See the shared event list for all events available for this component.