The Label
widget provides a text label that shows
read-only text.
<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;
}
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;
}
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. |
Name |
Description |
textChange |
Emitted when the label text is changed. |