Label

Using a label requires the Label module.

import * as LabelModule from "tns-core-modules/ui/label";

Binding the Label text property to a view-model property.

<Page>
  <Label text="{{ title }}" />
</Page>

Setting the label text content

const label = new LabelModule.Label();
const expectedValue = "Expected Value";
label.text = expectedValue;

Turning on text wrapping for a label

const label = new LabelModule.Label();
label.textWrap = true;

Styling a label via css class

label.text = "The quick brown fox jumps over the lazy dog.";
label.className = "title";
// after that all we have to do is to set a similar css entry within parent page css property
// label.parentPage.css = ".title {background-color: #C6C6C6; color: #10C2B0; font-size: 14;}";

Styling a label via css type

label.text = "The quick brown fox jumps over the lazy dog.";
// in order to style label with a "type style scope" just put a similar css entry
// testLabel.parentPage.css = "label {background-color: #C6C6C6; color: #10C2B0; font-size: 14;}";
// all labels within the parent page will be styled according to css values

Styling a label via css control identifier

label.text = "The quick brown fox jumps over the lazy dog.";
label.id = "testLabel";
// after that all we have to do is to set a similar css entry within parent page css property
// label.parentPage.css = "#testLabel {background-color: #C6C6C6; color: #10C2B0; font-size: 14;}";

Binding text property of a label to an observable model

const label = new LabelModule.Label();
const expValue = "Expected Value";
const sourceModel = new observableModule.Observable();
const bindingOptions: bindable.BindingOptions = {
    sourceProperty: "sourceProperty",
    targetProperty: "text"
};
label.bind(bindingOptions, sourceModel);
sourceModel.set("sourceProperty", expValue);
// console.log(label.text); --> prints: "Expected Value"

Stay connected with NativeScript

(expect a newsletter every 4-8 weeks)

NativeScript
NativeScript is licensed under the Apache 2.0 license .
© Progress Software Corporation. All Rights Reserved.