Text
Renders a text.
Node name : text
Attributes
| Attribute | Type | Required | Default value | Description |
|---|---|---|---|---|
| size | string (small, medium, large, extralarge) or int |
false |
medium |
Defines font size using a predefined value from the theme or a hardcoded one in pixels (see remark below) |
| weight | string (regular, strong, stronger) |
false |
regular |
Defines font weight |
| orientation | string (horizontal, vertical) |
false |
horizontal |
Defines text orientation |
| property-name | string |
false |
UI view property name | |
| item | UI view | false |
@DatasourceCurrent |
Item to be bound to |
| format | string |
false |
Used to format the property displayed (only when property-name is filled) |
|
| max-lines | int |
false |
Defines maximum number of lines to show before the content is truncated and an ellipsis replaces the truncated content |
Remarks
Format attribute
The format string is expressed as a .NET-style Standard date and time format strings, Custom date and time format strings or Standard Numeric Format Strings.
Note
For numeric values the .NET-style Custom Numeric Format Strings are not supported.
MaxLines attribute
The max-lines attribute is incompatible with the layout:height directive and will be ignored if both are specified.
(A warning message will be displayed in the Neos designer diagnostics if that's the case.)
Size attribute with hardcoded value in pixels
Using hardcoded sizes is permitted but not recommended. This is intended for very special cases. The use of predefined sizes from the theme should be preferred.
The use of hardcoded font sizes will result in a warning which may need to be disabled in the cluster configuration. For instance:
GenerationLogLevels:
UITemplateHardcodedFontSize: None # M0064 # TextComponentUI demo
Examples
<text size="extralarge" weight="strong" orientation="vertical">The text.</text>
In the following example, the OrderDate has a value of 2009-06-15T13:45:30. The displayed text will be formatted according to the short date pattern format d. For en-US culture, it will render as 6/15/2009.
<text property-name="OrderDate" format="d" />