スポンサースポンサーになる

トグル Vue コンポーネント

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

トグル コンポーネント

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

トグル プロパティ

プロパティタイプデフォルト説明
<f7-toggle> プロパティ
initbooleantrueトグルを初期化します
namestringトグル入力の名前
valuestring
number		トグル入力の値
checkedbooleanfalseトグル入力がチェックされているかどうかを定義します
disabledbooleanfalseトグル入力が無効になっているかどうかを定義します
readonlybooleanfalseトグル入力が読み取り専用かどうかを定義します
tooltipstringホバー/プレス時に表示するツールチップテキスト
tooltip-triggerstringhoverツールチップをトリガー（開く）する方法を定義します。 hover、click、またはmanualを指定できます。

トグル イベント

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

トグル メソッド

<f7-toggle> メソッド
.toggle()チェックボックスの状態を切り替えます

トグル v-model

トグル 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>

例

toggle.vue
<template>
  <f7-page>
    <f7-navbar title="Toggle"></f7-navbar>
    <f7-block-title>Super Heroes</f7-block-title>
    <f7-list simple-list strong outline-ios dividers-ios>
      <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>
<script>
import { f7Navbar, f7Page, f7BlockTitle, f7List, f7ListItem, f7Toggle } from 'framework7-vue';

export default {
  components: {
    f7Navbar,
    f7Page,
    f7BlockTitle,
    f7List,
    f7ListItem,
    f7Toggle,
  },
};
</script>
このドキュメントを改善する
このページについて