ユーザーインターフェイス / コンポーネント / スイッチ

スイッチ

Switchコンポーネントを使用すると、ユーザーはコントロールを2つの状態間で切り替えることができます。 コンポーネントのデフォルトの状態はoffまたはfalseですが、 checkedプロパティに論理値を設定することで状態を変更できます。 状態変更イベントを処理するには、checkedChangeプロパティを使用できます。 このプロパティは、値が変更されたときにアプリに通知します。

TextField

使用法

<Switch checked="true" loaded="onSwitchLoaded"/>
function onSwitchLoaded(argsloaded) {
    const mySwitch = argsloaded.object;
    mySwitch.on("checkedChange", (args) => {
        const sw = args.object;
        const isChecked = sw.checked;
        console.log(`Switch new value ${isChecked}`);
    });
}
exports.onSwitchLoaded = onSwitchLoaded;
import { Switch } from "tns-core-modules/ui/switch";
export function onSwitchLoaded(argsloaded) {
    const mySwitch: Switch = <Switch> argsloaded.object;
    mySwitch.on("checkedChange", (args) => {
        let sw: Switch = <Switch> args.object;
        let isChecked = sw.checked;
        console.log(`Switch new value ${isChecked}`);
    });
}

デモソース


スタイリング

<Switch color="yellow" backgroundColor="green" offBackgroundColor="red"/>

デモソース


コードビハインドによるSwitchコンポーネントの作成

<!-- The Layout that will hold the dynamically created Switch -->
<StackLayout id="stackLayoutId" class="m-15 text-center" width="80%" height="80%">
      <Label text="{{ 'Result: ' + swResult}}" textWrap="true" class="h2"/>
</StackLayout>
// creating new Switch and binding the checked property
const mySwitch = new switchModule.Switch();
const options = {
    sourceProperty: "isChecked",
    targetProperty: "checked"
};
mySwitch.bind(options, vm);
mySwitch.on("checkedChange", (args) => {
    console.log(args.object.checked);
});

// setting up mySwitch.checked to true via binding
vm.set("isChecked", true);

// The above code is equivalent to binding via the XML
/*
    
*/

// adding the created element to already existing layout
stackLayout.addChild(mySwitch);
// creating new Switch and binding the checked property
const mySwitch = new Switch();
const options = {
    sourceProperty: "isChecked",
    targetProperty: "checked"
};
mySwitch.bind(options, vm);
mySwitch.on("checkedChange", (swargs) => {
    console.log((<Switch>swargs.object).checked);
});

// setting up mySwitch.checked to true via binding
vm.set("isChecked", true);

// The above code is equivalent to binding via the XML
/*
    <Switch checked="">
*/

// Adding the created element to already existing layout
stackLayout.addChild(mySwitch);

プロパティ

名前タイプ説明
checkedbooleanスイッチがチェック(ON)か否かを取得または設定します。
offBackgroundColorColorOFF時の色取得または設定します。

APIリファレンス

名前タイプ
tns-core-modules/ui/switchModule
SwitchClass

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

ANDROID IOS
android.widget.Switch UISwitch
入門

コアコンセプト

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

ツール

ハードウェアアクセス

プラグインの開発

リリース

アプリテンプレート

パフォーマンスの最適化

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

ガイド

サポートを受ける

トラブルシューティング

Siedkick