Documentation

Report Edit

Text

import {Text} from 'cx/widgets';

The Text is used to dynamically render pure text content (without a container element).

Hello, Jane!
Hello, Jane!
Other static content.
StyleText
<TextField label="User name" value={{bind: '$page.username', defaultValue: "Jane" }} />

<div style={style} text-tpl="Hello, {$page.username|guest}!">
    Other static content (this will not get rendered).
</div>

<div style={style} >
    <Text tpl='Hello, {$page.username|guest}!' />
    <br/>
    Other static content.
</div>
Copied!Cx Fiddle

A common use-case is when we want to define inner text content of an element that also contains other child components. In such cases we cannot use the text property as it would override any child elements.

Configuration

PropertyDescriptionType
value

Text value.

string
bind

Store path containing the text value. Equivalent to the use of value-bind.

string
expr

Expression string. Equivalent to the use of value-expr.

string
tpl

Template string. Equivalent to the use of value-tpl.

string