トグル

トグルレイアウト

レイアウトはとてもシンプルです。

<!-- トグル要素 -->
<label class="toggle">
  <!-- トグルの入力 -->
  <input type="checkbox" />
  <!-- トグルアイコン -->
  <span class="toggle-icon"></span>
</label>

シンプルなリストの内側。

<div class="list simple-list">
  <ul>
    ...
    <li>
      <span>Text label</span>
      <label class="toggle">
        <input type="checkbox" />
        <span class="toggle-icon"></span>
      </label>
    </li>
  </ul>
</div>

通常のリストの中（item-afterの中が望ましい）。

<div class="list">
  <ul>
    ...
    <li class="item-content">
      <div class="item-inner">
        <div class="item-title">Text label</div>
        <div class="item-after">
          <label class="toggle">
            <input type="checkbox" />
            <span class="toggle-icon"></span>
          </label>
        </div>
      </div>
    </li>
  </ul>
</div>

トグルの色

トグルはすべてのデフォルトカラーをサポートしています。そのため、色を変更するには、toggle 要素に color-[color] クラスを追加します。

<!-- 赤色のトグル -->
<label class="toggle color-red">...</label>

<!-- オレンジのトグル -->
<label class="toggle color-orange">...</label>

トグルアプリのメソッド

ここでは、Toggle を扱う App の関連メソッドを見てみましょう。

トグルのパラメータ

ここでは、Toggleを作成するために必要なパラメータの一覧を見てみましょう。

var toggle = app.toggle.create({
  el: '.toggle',
  on: {
    change: function () {
      console.log('Toggle changed')
    }
  }
})

トグルのメソッドとプロパティ

トグルを作成するには、メソッドを呼び出す必要があります。

var toggle = app.toggle.create({ /* parameters */ })

その後、初期化されたインスタンス（上記の例では toggle という変数）に、便利なメソッドやプロパティを設定します。

トグルのイベント

Toggle は、toggle 要素に対する以下の DOM イベントと、app および toggle インスタンスに対するイベントを発生させます。

DOM イベント

アプリとトグルインスタンスのイベント

Toggle インスタンスは、self インスタンスと app インスタンスの両方でイベントを発行します。アプリのインスタンスのイベントは、同じ名前でプレフィックスが toggle となっています。

トグルの自動初期化

トグル API を使用する必要がなく、トグルがページ内にあり、ページの初期化時に DOM に表示される場合は、追加の toggle-init クラスを追加するだけで、自動的に初期化することができます。

<!-- toggle-init クラスの追加 -->
<label class="toggle toggle-init">
  <input type="checkbox" />
  <span class="toggle-icon"></span>
</label>

この場合、生成されたトグルのインスタンスにアクセスする必要がある場合は、app.toggle.get アプリメソッドを使用します。

var toggle = app.toggle.get('.toggle');

if (toggle.checked) {
  // 何かをする
}

CSS Variables

Below is the list of related CSS variables (CSS custom properties).

:root {
  --f7-toggle-handle-color: #fff;
}
:root .theme-dark,
:root.theme-dark {
  --f7-toggle-inactive-color: #555;
}
.ios {
  --f7-toggle-width: 52px;
  --f7-toggle-height: 32px;
  --f7-toggle-border-color: #e5e5e5;
  --f7-toggle-inactive-color: #fff;
}
.ios .theme-dark,
.ios.theme-dark {
  --f7-toggle-border-color: #555;
}
.md {
  --f7-toggle-width: 36px;
  --f7-toggle-height: 14px;
  --f7-toggle-inactive-color: #b0afaf;
}
.aurora {
  --f7-toggle-width: 40px;
  --f7-toggle-height: 20px;
  --f7-toggle-inactive-color: #aaa;
}

<div class="page">
  <div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner">
      <div class="title">Toggle</div>
    </div>
  </div>
  <div class="page-content">
    <div class="block-title">Super Heroes</div>
    <div class="list simple-list">
      <ul>
        <li>
          <span>Batman</span>
          <label class="toggle toggle-init color-black">
            <input type="checkbox" checked />
            <span class="toggle-icon"></span>
          </label>
        </li>
        <li>
          <span>Aquaman</span>
          <label class="toggle toggle-init color-blue">
            <input type="checkbox" checked />
            <span class="toggle-icon"></span>
          </label>
        </li>
        <li>
          <span>Superman</span>
          <label class="toggle toggle-init color-red">
            <input type="checkbox" checked />
            <span class="toggle-icon"></span>
          </label>
        </li>
        <li>
          <span>Hulk</span>
          <label class="toggle toggle-init color-green">
            <input type="checkbox" />
            <span class="toggle-icon"></span>
          </label>
        </li>
        <li>
          <span>Spiderman (Disabled)</span>
          <label class="toggle toggle-init disabled">
            <input type="checkbox" />
            <span class="toggle-icon"></span>
          </label>
        </li>
        <li>
          <span>Ironman (Disabled)</span>
          <label class="toggle toggle-init toggle-init">
            <input type="checkbox" checked disabled />
            <span class="toggle-icon"></span>
          </label>
        </li>
        <li>
          <span>Thor</span>
          <label class="toggle toggle-init color-orange">
            <input type="checkbox" checked />
            <span class="toggle-icon"></span>
          </label>
        </li>
        <li>
          <span>Wonder Woman</span>
          <label class="toggle toggle-init color-pink">
            <input type="checkbox" />
            <span class="toggle-icon"></span>
          </label>
        </li>
      </ul>
    </div>
  </div>
</div>