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

Improve this document

Demo Source

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