OnsSwitch Directive (ons-switch)

<ons-switch>要素のAngularディレクティブです。

スイッチを表示するコンポーネントです。

実例

Switch

ons-switch要素はswitch UIを作ることができます。ons-switchに値を指定する場合には、[value]バインディングを使って値を指定します。

@Component({
  selector: 'app',
  template: `
    <ons-switch [value]="target"></ons-switch>
    `
})
export class AppComponent {
  target: boolean = true;
}

値の変更を補足する

ons-switchの値を補足するには、(change)イベントバインディングを次のように記述します。

@Component({
  selector: 'app',
  template: `
    <div>
      <div><ons-switch [value]="target" (change)="target = $event.target.checked"></ons-switch></div>
      <div>{{target ? 'on' : 'off'}}</div>
    </div>
    `
})
export class AppComponent {
  target: boolean = true;
}

関連情報

属性

名前 型 / デフォルト値 概要
modifier String スイッチの表現を指定します。 Optional.
disabled スイッチを無効の状態にする場合に指定します。 Optional.
checked スイッチがONの状態にするときに指定します。 Optional.
input-id String Specify the id attribute of the inner <input> element. This is useful when using <label for="..."> elements. (翻訳中) Optional.

プロパティ概要

名前 概要
checked スイッチがONの場合にtrue
value The current value of the input. (翻訳中)
disabled 無効化されている場合にtrue
checkbox コンポーネント内部のcheckbox要素になります。

プリセットのmodifier

Name 概要
material Material Design switch (翻訳中)

Inputs

名前 概要
value {boolean} ons-switchコンポーネントに設定する値を指定します。

Outputs

名前 概要
valueChange {string} 値が変更された時に発火します。

お困りですか?

Onsen UIに関する質問は、Stack Overflowにてonsen-uiタグを付与してください。Onsen UIチームはあなたの問題解決をお手伝いします。

バグ報告や機能要望については、GitHub Issuesに記載をお願いいたします。

あわせて、下記の情報も参考にしてください。