Text (Alpha)
The custom component text allows adding text inside custom components. For example, adding text inside a Card (Alpha) or View (Alpha).
For steps on creating a custom component, see How to create a custom component.
You can use when and instanceId with component.text, add the properties before the options property. The available list of options is shown below. For the full list of properties, see jc-text.
Options | value |
|---|---|
align | Determine the text alignment, options are: center left right |
color | Multiple, use IntelliSense to view the available list. See Jigx color palette to view the different colors. |
decoration |
|
emphasis | Change the text's brightness and boldness. high low low-medium medium |
numberOfLines | Use a number to indicate the number of lines of text. Use an expression to determine the number of lines needed. |
onPress | Multiple, use to view the list of available actions to call. |
size | Adjust the size of the text, the following sizes are available: extra-large large medium regular small tiny |
value | Provide the text to be used. You can use an Expressions, as well as Localization. |
weight | Determine how thick or bold the text must be, the following weights are available: bold extra-bold extra-light light regular semi-bold |
This example shows the use of component.text with various font sizes configured using the size property, all displayed within a Card (Alpha). Examples:
This example shows how to underline text with various font sizes using the decoration: underline property. The text is contained in a yellow Card (Alpha). Examples:
This example shows the component.text with various font sizes and emphasis styles, configured using the emphasis property, all displayed in a Card (Alpha). Examples:
This example demonstrates various text alignments with varying font sizes using the align property, all displayed in a Card (Alpha). Examples:
This example demonstrates how to control the number of text lines displayed in component.text using the numberOfLines: property, with the content displayed inside a Card (Alpha). Examples:
This example shows how to set the color of text of varying font sizes, and spread over a number of lines by using the color: property, with the content displayed in a Card (Alpha). Examples:
These examples demonstrate the various options for using text weights to ensure thickness and boldness of text combined with varying sizes, displayed in a Card (Alpha). By combining the size, and weight properties, you can achieve the desired appearance. Examples:
