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

NativeScript Core

Label

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

const labelModule = require("tns-core-modules/ui/label");
import { Label } from "tns-core-modules/ui/label";

Basics

The Label widget comes with text property.

SetTING a label in XML page and how to bind its text property.

<Label id="lbl" text="{{ title }}" textWrap="true" />
const page = args.object;
const vm = new Observable();
vm.set("title", "NativeScript is Awesome");
page.bindingContext = vm;
const page = <Page>args.object;
const vm = new Observable();
vm.set("title", "NativeScript is Awesome");
page.bindingContext = vm;

Accessing a label and modifying its properties.

const label = page.getViewById("lbl");
label.text = "NativeScript is Awesome";
label.textWrap = true;
label.textAlignment = "center";
const label = <Label>page.getViewById("lbl");
label.text = "NativeScript is Awesome";
label.textWrap = true;
label.textAlignment = "center";

Improve this document

Demo Source


Code Behind

Creating a Label programmatically with text.

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

Improve this document

Demo Source


Styling

To style and customize the Label widget use the conventional CSS properties and Icon Fonts. The example below shows a label with icon (using icon font), several CSS properties.

.fa {
    font-family: FontAwesome;
}
.my-label {
    background-color: #bc7474;
    color: whitesmoke;
    font-size: 24;
    padding: 8;
    text-align: center;
    vertical-align: middle;
    width: 90%;
}
.border {
    border-color: darkred;
    border-radius: 10;
    border-width: 2;
}
<Label text="&#xff17b; Sample label" class="fa my-label border" />

Improve this document

Demo Source


API Reference for Label Class

Native Component

Android iOS
android.widget.TextView UILabel