Text
The Text component can be used to create headers, sub-headers, add labels next to various input fields and more. In this document, we'll go through all the configuration options for the Text component.
Data
| Data Type | Description |
|---|---|
| Plain text | Simple text without any formatting. Ideal for straightforward messages where no emphasis or special layout is needed. |
| Markdown | Allows for easy formatting of text with elements like headers, bold, italics, links, and lists, making it suitable for writing content that requires basic styling. |
| HTML | Used to create formatted text and various elements on web pages. |
Events
Event | Description |
|---|---|
| On click | Triggers whenever the user clicks on the component. |
| On hover | Triggers whenever the user hovers over the component. |
info
Check Action Reference docs to get detailed information about all the Actions.
Component Specific Actions (CSA)
Following actions of the Text component can be controlled using Component-Specific Actions(CSA):
Action | Description | How To Access |
|---|---|---|
| setText() | Sets the value of the input field. | Employ a RunJS query (for e.g., await components.text1.setText('this is input text')) or trigger it using an event. |
| clear() | Clears the entered text in the input field. | Employ a RunJS query (for e.g., await components.text1.clear()) or trigger it using an event. |
| setVisibility() | Sets the visibility of the component. | Employ a RunJS query (for e.g., await components.text1.setVisibility(false)) or trigger it using an event. |
| setLoading() | Sets the loading state of the component. | Employ a RunJS query (for e.g., await components.text1.setLoading(true)) or trigger it using an event. |
| setDisable() | Disables the component. | Employ a RunJS query (for e.g., await components.text1.setDisable(true)) or trigger it using an event. |
info
Check the component specific actions available for this component here.
Exposed Variables
| Variable | Description | How To Access |
|---|---|---|
text | Holds the value of the component's label. | Accessible dynamically with JS (for e.g., {{components.text1.text}}). |
isLoading | Indicates if the component is loading. | Accessible dynamically with JS (for e.g., {{components.text1.isLoading}}). |
isVisible | Indicates if the component is visible. | Accessible dynamically with JS (for e.g., {{components.text1.isVisible}}). |
isDisabled | Indicates if the component is disabled. | Accessible dynamically with JS (for e.g., {{components.text1.isDisabled}}). |
Additional Actions
Action | Description | Configuration Options |
|---|---|---|
| Loading state | Enables a loading spinner, often used with isLoading to indicate progress. Toggle or set dynamically. | Enable/disable the toggle button or dynamically configure the value by clicking on fx and entering a logical expression. |
| Visibility | Controls component visibility. Toggle or set dynamically. | Enable/disable the toggle button or dynamically configure the value by clicking on fx and entering a logical expression. |
| Disable | Enables or disables the component. Toggle or set dynamically. | Enable/disable the toggle button or dynamically configure the value by clicking on fx and entering a logical expression. |
| Tooltip | Provides additional information on hover. Set a string value for display. | String (e.g., Enter your name here. ). |
Devices
Property | Description | Expected Value |
|---|---|---|
| Show on desktop | Makes the component visible in desktop view. | You can set it with the toggle button or dynamically configure the value by clicking on fx and entering a logical expression. |
| Show on mobile | Makes the component visible in mobile view. | You can set it with the toggle button or dynamically configure the value by clicking on fx and entering a logical expression. |
Styles
Text
| Text Property | Description | Configuration Options |
|---|---|---|
| Size | Dimensions of the characters in a font. | Enter any number between 1-100 or dynamically configure it using fx. |
| Weight | Determines how bold or light your text will appear. | Select from light, regular, semi-bold or bold or dynamically configure it using fx. |
| Style | Allows you to apply styles like italic or normal, altering the overall look of the text content. | Select from normal, italic or oblique or dynamically configure it using fx. |
| Color | Sets the color of the text. | Choose a color using the color picker or dynamically configure it using fx. |
| Scroll | Creates a scroll bar if the text exceeds the component's dimensions. | Choose between enable or disable or dynamically configure it using fx. |
| Line Height | Determines the vertical space between lines of text within an element. | Enter a number as the value (example: 1.5) or dynamically configure it using fx. |
| Text Indent | Commonly used to create an indentation effect. | Enter a number as the value (example: 10) or dynamically configure it using fx. |
| Alignment | Sets the alignment of the text. | Select the available options to align the text vertically or horizontally or dynamically configure it using fx. |
| Text Decoration | Adds an underline, overline, line-through, or a combination of lines to selected text. | Select one of the available options - none(default), underline, overline, and strike-through or dynamically configure it using fx. |
| Transformation | Dictates the capitalization of text. | Select one of the available options - none (default), uppercase, lowercase, capitalize or dynamically configure it using fx. |
| Letter spacing | Determines the space between each letter. | Enter a number as the value (example: 15) or dynamically configure it using fx. |
| Word spacing | Determines the space between each word. | Enter a number as the value (example: 15) or dynamically configure it using fx. |
| Font variant | Adjusts the text appearance by applying font variations. | Select one of the available options - normal, inherit, small-caps, initial or dynamically configure it using fx. |
Container
Field Property | Description | Configuration Options |
|---|---|---|
| Background | Sets the background color of the component. | Select the color or click on fx and input code that programmatically returns a Hex color code. |
| Border | Sets the border color of the component. | Select the color or click on fx and input code that programmatically returns a Hex color code. |
| Border radius | Modifies the border radius of the component. | Enter a number or click on fx and enter a code that programmatically returns a numeric value. |
| Box shadow | Sets the box shadow properties of the component. | Select the box shadow color and adjust the related properties or programmatically set it using fx. |
| Padding | Adds padding to the component. | Select None for no padding and Default for standard padding. |