トグルVueコンポーネント

Toggle Vueコンポーネントは、Toggleコンポーネントを表します。

トグルコンポーネント

以下のコンポーネントが含まれています。

f7-toggle

トグルのプロパティ

Prop	Type	Default	Description
<f7-toggle> properties
init	boolean	true	トグルの初期化
name	string		トグルの入力名
value	string number		トグルの入力値
checked	boolean	false	トグル入力をチェックするかどうかを定義します。
disabled	boolean	false	トグル入力が無効であるかどうかを定義します。
readonly	boolean	false	トグル入力が読み取り専用であるかどうかを定義します。
tooltip	string		tooltip ホバー/プレス時に表示するテキスト
tooltip-trigger	string	hover	どのようにしてツールチップを開くかを定義します。hover`,` click`,` manual` のいずれかです。

トグルイベント

Event	Description
<f7-toggle> events
change	トグルのチェックボックスの状態が変化したときに、イベントが発生します。このイベントはタッチデバイスでは発生しないので、代わりに次の `toggle:change` イベントを使用することをお勧めします。
toggle:change	トグルのチェックボックスの状態が変更されると、イベントが発生します。

トグルのメソッド

<f7-toggle> methods
.toggle()	Toggle checkbox state

vモデルのトグル

トグルVueコンポーネントは、checkedプロパティでv-modelをサポートしています。

<template>
  <f7-page>
    <f7-toggle v-model:checked="jobIsDone" />
    <p>Job is done: {{ jobIsDone }}</p>
  </f7-page>
</template>
<script>
  export default {
    data() {
      return {
        jobIsDone: false,
      };
    }
  };
</script>

Examples

<template>
<f7-page>
  <f7-navbar title="Toggle"></f7-navbar>
  <f7-block-title>Super Heroes</f7-block-title>
  <f7-list simple-list>
    <f7-list-item>
      <span>Batman</span>
      <f7-toggle checked></f7-toggle>
    </f7-list-item>
    <f7-list-item>
      <span>Aquaman</span>
      <f7-toggle checked color="blue"></f7-toggle>
    </f7-list-item>
    <f7-list-item>
      <span>Superman</span>
      <f7-toggle checked color="red"></f7-toggle>
    </f7-list-item>
    <f7-list-item>
      <span>Hulk</span>
      <f7-toggle color="green"></f7-toggle>
    </f7-list-item>
    <f7-list-item>
      <span>Spiderman (Disabled)</span>
      <f7-toggle disabled></f7-toggle>
    </f7-list-item>
    <f7-list-item>
      <span>Ironman (Disabled)</span>
      <f7-toggle checked disabled></f7-toggle>
    </f7-list-item>
    <f7-list-item>
      <span>Thor</span>
      <f7-toggle checked color="orange"></f7-toggle>
    </f7-list-item>
    <f7-list-item>
      <span>Wonder Woman</span>
      <f7-toggle color="pink"></f7-toggle>
    </f7-list-item>
  </f7-list>
</f7-page>
</template>