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;

}

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

Events

API References

Native Component