ユーザーインターフェイス / コンポーネント / ラベル

ラベル

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

プロパティ

名前 タイプ 説明
letterSpacingnumberletterSpaceスタイルプロパティを取得または設定します。
lineHeightnumberlineHeightスタイルプロパティを取得または設定します。
textstringラベルテキストを取得または設定します。
textAlignment"initial", "left", "center", "right"テキスト配置スタイルプロパティを取得または設定します。
textDecoration"none", "underline", "line-through"テキスト修飾スタイルプロパティを取得または設定します。
textTransform"initial", "none", "capitalize", "uppercase", "lowercase"テキスト変換スタイルプロパティを取得または設定します。
textWrapbooleanラベルがテキストを折り返すかどうかを取得または設定します。
whiteSpace"initial", "normal", "nowrap"空白スタイルを取得または設定します。

イベント

名前 説明
textChangeラベルテキストが変更されたときに生成されます

APIリファレンス

名前 タイプ
tns-core-modules/ui/label Module
Label Class

ネイティブコンポーネント

ANDROID IOS
android.widget.TextView UILabel
入門

コアコンセプト

ユーザーインターフェース

ツール

ハードウェアアクセス

プラグインの開発

リリース

アプリテンプレート

パフォーマンスの最適化

フレームワークモジュール

ガイド

サポートを受ける

トラブルシューティング

Siedkick