ons-switch

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

実例

Switches

A switch is an UI element that can be used to toggle between two states.

The state of a switch in Onsen UI can be changed both by dragging the knob and by tapping on the switch.

To make the switch enabled by default you can use the checked attribute just like with radio buttons and checkboxes.

<ons-switch checked>
</ons-switch>

To disable the switch the disabled attribute is used.

<ons-switch disabled>
</ons-switch>

Getting the value

To get the value of an <ons-switch> element you need to get a reference to the DOM element and read the checked property.

var switch = document.getElementById('switch-1');
ons.notification.alert('Value is ' + switch.checked);

関連情報

名前 型 / デフォルト値 概要
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要素になります。
Name 概要
material Material Design switch (翻訳中)
シグネチャ 概要
focus() Focuses the switch. (翻訳中)
blur() Removes focus from the switch. (翻訳中)
focus()

Focuses the switch. (翻訳中)

blur()

Removes focus from the switch. (翻訳中)

名前 概要
change ON/OFFが変わった時に発火します。
change

ON/OFFが変わった時に発火します。

パラメーター
名前 概要
event Object イベントオブジェクト。
event.switch Object イベントが発火したSwitchオブジェクトを返します。
event.value Boolean 現在の値を返します。
event.isInteractive Boolean タップやクリックなどのユーザの操作によって変わった場合にはtrueを返します。

お困りですか?

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

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

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