ユーザーインターフェイス /
コンポーネント / ラベル
ラベル
Labelウィジェットは、読み取り専用テキストを表示するテキストラベルを提供します。
使用法
<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;
}
デモソース
ヒントとコツ
コードビハインドによるラベルの作成
textを用いたプログラムによるLabel作成。
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;
}
プロパティ
名前 |
タイプ |
説明 |
letterSpacing | number | letterSpaceスタイルプロパティを取得または設定します。 |
lineHeight | number | lineHeightスタイルプロパティを取得または設定します。 |
text | string | ラベルテキストを取得または設定します。 |
textAlignment | "initial", "left", "center", "right" | テキスト配置スタイルプロパティを取得または設定します。 |
textDecoration | "none", "underline", "line-through" | テキスト修飾スタイルプロパティを取得または設定します。 |
textTransform | "initial", "none", "capitalize", "uppercase", "lowercase" | テキスト変換スタイルプロパティを取得または設定します。 |
textWrap | boolean | ラベルがテキストを折り返すかどうかを取得または設定します。 |
whiteSpace | "initial", "normal", "nowrap" | 空白スタイルを取得または設定します。 |
イベント
名前 |
説明 |
textChange | ラベルテキストが変更されたときに生成されます |
APIリファレンス
ネイティブコンポーネント