NativeScript Core

Label

The Label widget provides a text label that shows read-only text.

Usage

<Label text="Lores Ipsum..." textWrap="true"/>
<Label row="1" text="{{ title }}" textWrap="true" />
const Observable = require("tns-core-modules/data/observable").Observable;

function onNavigatingTo(args) {

    const page = args.object;
    const vm = new Observable();
    vm.set("title", "NativeScript is Awesome");
    page.bindingContext = vm;

}
exports.onNavigatingTo = onNavigatingTo;
import { EventData, Observable } from "tns-core-modules/data/observable";
import { Page } from "tns-core-modules/ui/page";

export function onNavigatingTo(args: EventData) {

    const page = <Page>args.object;
    const vm = new Observable();
    vm.set("title", "NativeScript is Awesome");
    page.bindingContext = vm;

}

Improve this document

Demo Source


Tips And Tricks

Creating Label via Code-Behind

Creating a Label programmatically with text.

 const labelModule = require("tns-core-modules/ui/label");

function onNavigatingTo(args) {
    const page = args.object;
    const container = page.getViewById("container");
    const vm = new observableModule.Observable();

    const myLabel = new labelModule.Label();
    myLabel.text = "The quick brown fox jumps over the lazy dog.";

    // Styling a label via css type
    myLabel.text = "The quick brown fox jumps over the lazy dog.";
    let pageCSS = "label {background-color: #C6C6C6; color: #bc7474; font-size: 14; padding:10;} ";

    const mySecondLabel = new labelModule.Label();
    mySecondLabel.text = "The quick brown fox jumps over the lazy dog.";
    // Styling a label via css class
    mySecondLabel.className = "title";
    pageCSS += ".title {background-color: #7974bc; color: #54ff5f; font-size: 20; padding:10;} ";

    const myThirdLabel = new labelModule.Label();
    myThirdLabel.text = "The quick brown fox jumps over the lazy dog.";
    // Turning on text wrapping for a label
    myThirdLabel.textWrap = true;
    // Styling a label via css control identifier
    myThirdLabel.id = "testLabel";
    pageCSS += "#testLabel {background-color: #bc7474; color: whitesmoke; font-size: 25; padding:10;}";

    // Binding text property of a label to an observable model
    const myFourthlabel = new labelModule.Label();
    myFourthlabel.textAlignment = "center";
    myFourthlabel.fontSize = 24;
    const expValue = "Expected Value";
    const bindingOptions = {
        sourceProperty: "sourceProperty",
        targetProperty: "text"
    };
    myFourthlabel.bind(bindingOptions, vm);
    vm.set("sourceProperty", expValue);
    // set to the page css property the CSS style defined in the pageCSS
    page.css = pageCSS;

    container.addChild(myLabel);
    container.addChild(mySecondLabel);
    container.addChild(myThirdLabel);
    container.addChild(myFourthlabel);
    page.bindingContext = vm;
}
exports.onNavigatingTo = onNavigatingTo;
import { Label } from "tns-core-modules/ui/label";
export function onNavigatingTo(args: EventData) {
    const page = <Page>args.object;
    const container = <StackLayout>page.getViewById("container");
    const vm = new Observable();

    const myLabel = new Label();
    myLabel.text = "The quick brown fox jumps over the lazy dog.";

    // Styling a label via css type
    myLabel.text = "The quick brown fox jumps over the lazy dog.";
    let pageCSS = "Label {background-color: #C6C6C6; color: #bc7474; font-size: 14; padding:10;} ";

    const mySecondLabel = new Label();
    mySecondLabel.text = "The quick brown fox jumps over the lazy dog.";
    // Styling a label via css class
    mySecondLabel.className = "title";
    pageCSS += ".title {background-color: #7974bc; color: #54ff5f; font-size: 20; padding:10;} ";

    const myThirdLabel = new Label();
    myThirdLabel.text = "The quick brown fox jumps over the lazy dog.";
    // Turning on text wrapping for a label
    myThirdLabel.textWrap = true;
    // Styling a label via css control identifier
    myThirdLabel.id = "testLabel";
    pageCSS += "#testLabel {background-color: #bc7474; color: whitesmoke; font-size: 25; padding:10;}";

    // Binding text property of a label to an observable model
    const myFourthlabel = new Label();
    myFourthlabel.textAlignment = "center";
    myFourthlabel.fontSize = 24;
    const expValue = "NativeScript is Awesome!";
    const bindingOptions = {
        sourceProperty: "sourceProperty",
        targetProperty: "text"
    };
    myFourthlabel.bind(bindingOptions, vm);
    vm.set("sourceProperty", expValue);
    // set to the page css property the CSS style defined in the pageCSS
    page.css = pageCSS;

    container.addChild(myLabel);
    container.addChild(mySecondLabel);
    container.addChild(myThirdLabel);
    container.addChild(myFourthlabel);
    page.bindingContext = vm;
}

Properties

Name Type Description
letterSpacing number Gets or sets letterSpace style property.
lineHeight number Gets or sets lineHeight style property.
text string Gets or sets the Label text.
textAlignment "initial", "left", "center", "right" Gets or sets text-alignment style property.
textDecoration "none", "underline", "line-through" Gets or sets text swcoration style property.
textTransform "initial", "none", "capitalize", "uppercase", "lowercase" Gets or sets text transform style property.
textWrap boolean Gets or sets whether the Label wraps text or not.
whiteSpace "initial", "normal", "nowrap" Gets or sets the white space style.

Events

Name Description
textChange Emitted when the label text is changed.

API References

Name Type
tns-core-modules/ui/label Module
Label Class

Native Component

Android iOS
android.widget.TextView UILabel