イオン-トグル

ユーザーが使用できるオプションは2つあります。この状況を処理する最も効率的な方法は、トグルフォームを使用することです。 Ionicは、アニメーション化され、実装が簡単なトグル要素のクラスを提供します。

トグルを使用する

Toggleは、2つのIonicクラスを使用して実装できます。まず、前の章で説明したのと同じ理由で label を作成し、それに toggle クラスを割り当てる必要があります。

ラベル内に*が作成されます。次の例では、さらに2つのイオンクラスが使用されています。 *track クラスは、トグルがタップされたときにチェックボックスとカラーアニメーションに背景スタイルを追加します。 handle クラスは、サークルボタンを追加するために使用されます。

次の例は、2つのトグルフォームを示しています。最初のものはチェックされ、2番目のものはチェックされません。

<label class = "toggle">
   <input type = "checkbox"/>
   <div class = "track">
      <div class = "handle"></div>
   </div>
</label>

<br>

<label class = "toggle">
   <input type = "checkbox"/>
   <div class = "track">
      <div class = "handle"></div>
   </div>
</label>

上記のコードは、次の画面を生成します-

イオントグル

複数のトグル

ほとんどの場合、Ionicで同じ種類の複数の要素を追加する場合、最良の方法はリストアイテムを使用することです。複数のトグルに使用されるクラスは item-toggle です。次の例は、トグルのリストを作成する方法を示しています。最初のものと2番目のものがチェックされます。

<ul class = "list">
   <li class = "item item-toggle">
      Toggle 1
      <label class = "toggle">
         <input type = "checkbox"/>
         <div class = "track">
            <div class = "handle"></div>
         </div>
      </label>
   </li>

   <li class = "item item-toggle">
      Toggle 2
      <label class = "toggle">
         <input type = "checkbox"/>
         <div class = "track">
            <div class = "handle"></div>
         </div>
      </label>
   </li>

   <li class = "item item-toggle">
      Toggle 3
      <label class = "toggle">
         <input type = "checkbox"/>
         <div class = "track">
            <div class = "handle"></div>
         </div>
      </label>
   </li>

   <li class = "item item-toggle">
      Toggle 4
      <label class = "toggle">
         <input type = "checkbox"/>
         <div class = "track">
            <div class = "handle"></div>
         </div>
      </label>
   </li>
</ul>

上記のコードは、次の画面を生成します-

イオントグルリスト

スタイリングトグル

すべてのIonic色クラスをトグル要素に適用できます。プレフィックスは toggle になります。これを label 要素に適用します。次の例は、適用されるすべての色を示しています。

<ul class = "list">
   <li class = "item item-toggle">
      Toggle Light
      <label class = "toggle  toggle-light">
         <input type = "checkbox"/>
         <div class = "track">
            <div class = "handle"></div>
         </div>
      </label>
   </li>

   <li class = "item item-toggle">
      Toggle Stable
      <label class = "toggle toggle-stable">
         <input type = "checkbox"/>
         <div class = "track">
            <div class = "handle"></div>
         </div>
      </label>
   </li>

   <li class = "item item-toggle">
      Toggle Positive
      <label class = "toggle toggle-positive">
         <input type = "checkbox"/>
         <div class = "track">
            <div class = "handle"></div>
         </div>
      </label>
   </li>

   <li class = "item item-toggle">
      Toggle Calm
      <label class = "toggle toggle-calm">
         <input type = "checkbox"/>
         <div class = "track">
            <div class = "handle"></div>
         </div>
      </label>
   </li>

   <li class = "item item-toggle">
      Toggle Balanced
      <label class = "toggle toggle-balanced">
         <input type = "checkbox"/>
         <div class = "track">
            <div class = "handle"></div>
         </div>
      </label>
   </li>

   <li class = "item item-toggle">
      Toggle Energized
      <label class = "toggle toggle-energized">
         <input type = "checkbox"/>
         <div class = "track">
            <div class = "handle"></div>
         </div>
      </label>
   </li>

   <li class = "item item-toggle">
      Toggle Assertive
      <label class = "toggle toggle-assertive">
         <input type = "checkbox"/>
         <div class = "track">
            <div class = "handle"></div>
         </div>
      </label>
   </li>

   <li class = "item item-toggle">
      Toggle Royal
      <label class = "toggle  toggle-royal">
         <input type = "checkbox"/>
         <div class = "track">
            <div class = "handle"></div>
         </div>
      </label>
   </li>

   <li class = "item item-toggle">
      Toggle Dark
      <label class = "toggle toggle-dark">
         <input type = "checkbox"/>
         <div class = "track">
            <div class = "handle"></div>
         </div>
      </label>
   </li>
</ul>

上記のコードは、次の画面を生成します-

イオントグルカラー

Ionic-toggle

イオン-トグル

トグルを使用する

複数のトグル

スタイリングトグル

目次