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.

Usage

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.

Label with formatted string

<Label>
    <FormattedString>
        <Span text="Words " color="#006600">
        </Span>
        <Span text="with " color="#990000" fontWeight="Bold">
        </Span>
        <Span text="different " color="#ffcc00">
        </Span>
        <Span text="color.">
        </Span>
    </FormattedString>
</Label>

TextField with formatted string

<TextField>
    <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

Button with formatted string

Tips And Tricks

Creating Button via Code-Behind

FormattedStrings could also be defined via code-behind.

Label with formatted string

const label = new Label();

const firstLabelSpan = new Span();
firstLabelSpan.text = "Formatted String ";
const secondLabelSpan = new Span();
secondLabelSpan.text = "Label";

const formattedStringLabel = new FormattedString();
formattedStringLabel.spans.push(firstLabelSpan);
formattedStringLabel.spans.push(secondLabelSpan);

label.formattedText = formattedStringLabel;

const label = new Label();

const firstLabelSpan = new Span();
firstLabelSpan.text = "Formatted String ";
const secondLabelSpan = new Span();
secondLabelSpan.text = "Label";

const formattedStringLabel = new FormattedString();
formattedStringLabel.spans.push(firstLabelSpan);
formattedStringLabel.spans.push(secondLabelSpan);

label.formattedText = formattedStringLabel;

TextField with formatted string

const textField = new TextField();

const formattedStringTextField = new FormattedString();
const firstTextFieldSpan = new Span();
const secondTextFieldSpan = new Span();

firstTextFieldSpan.fontSize = 15;
firstTextFieldSpan.text = "Formatted String ";
secondTextFieldSpan.text = "TextField";

formattedStringTextField.spans.push(firstTextFieldSpan);
formattedStringTextField.spans.push(secondTextFieldSpan);

textField.formattedText = formattedStringTextField;

const textField = new TextField();

const formattedStringTextField = new FormattedString();
const firstTextFieldSpan = new Span();
const secondTextFieldSpan = new Span();

firstTextFieldSpan.fontSize = 15;
firstTextFieldSpan.text = "Formatted String ";
secondTextFieldSpan.text = "TextField";

formattedStringTextField.spans.push(firstTextFieldSpan);
formattedStringTextField.spans.push(secondTextFieldSpan);

textField.formattedText = formattedStringTextField;

TextView with formatted string

Button with formatted string

Properties

API References