NativeScript Angular

Formatted String

NativeScript has a special class called FormattedString to support various text transformations and decorations. The FormattedString class can be used with all text-related components like Label, TextView, TextField and even Button.

Create Formatted String

Label with formatted string

<Label class="h3 p-15 m-15 text-left">
    <FormattedString>
        <Span text="Words " color="#006600" ></Span>
        <Span text="with " color="#990000" fontAttributes="Bold"></Span>
        <Span text="different " color="#ffcc00"></Span>
        <Span text="color."></Span>
    </FormattedString>
</Label>

TextField with formatted string

<TextField class="h3 p-15 m-15 text-left input input-border">
    <FormattedString>
        <Span text="Formatted " fontSize="16"></Span>
        <Span text="String " fontSize="18"></Span>
        <Span text="TextField" fontSize="22"></Span>
    </FormattedString>
</TextField>

TextView with formatted string

<TextView class="h3 p-15 m-15 text-left input input-border">
    <FormattedString>
        <Span text="Formatted "></Span>
        <Span text="String "></Span>
        <Span text="TextView" fontSize="20" color="#990000"></Span>
    </FormattedString>
</TextView>

Button with formatted string

<Button class="btn btn-primary btn-active">
    <FormattedString>
        <Span text="Formatted "></Span>
        <Span text="String " ></Span>
        <Span text="Button" backgroundColor="#0066ff"></Span>
    </FormattedString>
</Button>

Improve this document

Demo Source


API Reference for the Formatted String