📺 "One project. One language. Three apps." Learn more in our upcoming code sharing webinar!

NativeScript Core

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.

const FormattedString = require("tns-core-modules/text/formatted-string").FormattedString;
const Span = require("tns-core-modules/text/span").Span;
import { FormattedString, Span } from "tns-core-modules/text/formatted-string";
// import { Span } from "tns-core-modules/text/span";

Basics

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 class="h3 p-15 m-15 text-left">
    <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 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

Button with formatted string

Improve this document

Demo Source


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

Improve this document

Demo Source


API Reference for the Formatted String