Text
Last updated
Last updated
The Text component is used to display text in your apps. It supports both binding to Data Values, and constant text-defined design time in the UI Designer.
Sequences of white space in the text value are by default collapsed, and newline characters are handled the same as the other white space. Its lines wrap as necessary to fill the container.
This default behaviour can be overridden. In the Text component's Property Pane, open the format_paint Style section and change the Line Break value to, for instance, Pre Wrap to respect sequences of white space and newline characters. Have a look in the corresponding Blue Dot for details about all Line Break options.
You may force the text to be truncated into 1 line with an ellipsis (...) at the end, using the No Wrap setting.
If you do not tick No Wrap, the text will / may break over multiple lines.
You may limit the number of lines using the Max Lines setting. E.g. having the Max Lines set to 4, the text will be truncated with an ellipsis (...) at the end of the 4th line.
The Text component has built-in support for parsing Markdown content. You may activate this by ticking Enable Markdown in the component properties. Styling defined in the current Theme is applied to relevant HTML elements.
Markdown is a lightweight markup language for creating formatted text using a plain-text editor, allowing text to be converted to HTML.
See the Markdown section for details about supported Markdown syntax.
The Text component can be used to render a Rich Text property, either as Plain Text or Markdown. When databinding to a data value, Value processor must be enabled to make Rich Text properties available for selection. The image below shows how to perform this action in the databinding dialog. Note: Rich Text properties will be disabled before enabling the Value Processor.
