イオン-チェックボックス

イオンチェックボックス*はトグルとほぼ同じです。これら2つのスタイルはそれぞれ異なりますが、同じ目的で使用されます。

チェックボックスを追加する

チェックボックスフォームを作成するときは、ラベルと入力要素の両方に checkbox クラス名を追加する必要があります。次の例は、2つの単純なチェックボックスを示しています。1つはチェックされ、もう1つはチェックされていません。

<label class = "checkbox">
   <input type = "checkbox">
</label>

<label class = "checkbox">
   <input type = "checkbox">
</label>

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

イオンチェックボックス

複数のチェックボックス

すでに示したように、リストは複数の要素に使用されます。次に、各リスト項目に item-checkbox クラスを使用します。

<ul class = "list">
   <li class = "item item-checkbox">
      Checkbox 1
      <label class = "checkbox">
         <input type = "checkbox"/>
      </label>
   </li>

   <li class = "item item-checkbox">
      Checkbox 2
      <label class = "checkbox">
         <input type = "checkbox"/>
      </label>
   </li>

   <li class = "item item-checkbox">
      Checkbox e
      <label class = "checkbox">
         <input type = "checkbox"/>
      </label>
   </li>

   <li class = "item item-checkbox">
      Checkbox 4
      <label class = "checkbox">
         <input type = "checkbox"/>
      </label>
   </li>
</ul>

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

イオンチェックボックスリスト

スタイリングチェックボックス

チェックボックスのスタイルを設定する場合は、 checkbox プレフィックスが付いたIonicカラークラスを適用する必要があります。次の例を確認して、どのように見えるかを確認してください。この例では、チェックボックスのリストを使用します。

<ul class = "list">
   <li class = "item item-checkbox checkbox-light">
      Checkbox 1
      <label class = "checkbox">
         <input type = "checkbox"/>
      </label>
   </li>

   <li class = "item item-checkbox checkbox-stable">
      Checkbox 2
      <label class = "checkbox">
         <input type = "checkbox"/>
      </label>
   </li>

   <li class = "item item-checkbox  checkbox-positive">
      Checkbox 3
      <label class = "checkbox">
         <input type = "checkbox"/>
      </label>
   </li>

   <li class = "item item-checkbox  checkbox-calm">
      Checkbox 4
      <label class = "checkbox">
         <input type = "checkbox"/>
      </label>
   </li>

   <li class = "item item-checkbox  checkbox-balanced">
      Checkbox 5
      <label class = "checkbox">
         <input type = "checkbox"/>
      </label>
   </li>

   <li class = "item item-checkbox  checkbox-energized">
      Checkbox 6
      <label class = "checkbox">
         <input type = "checkbox"/>
      </label>
   </li>

   <li class = "item item-checkbox  checkbox-assertive">
      Checkbox 7
      <label class = "checkbox">
         <input type = "checkbox"/>
      </label>
   </li>

   <li class = "item item-checkbox  checkbox-royal">
      Checkbox 8
      <label class = "checkbox">
         <input type = "checkbox"/>
      </label>
   </li>

   <li class = "item item-checkbox  checkbox-dark">
      Checkbox 9
      <label class = "checkbox">
         <input type = "checkbox"/>
      </label>
   </li>
</ul>

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

イオンチェックボックスの色

Ionic-checkbox

イオン-チェックボックス

チェックボックスを追加する

複数のチェックボックス

スタイリングチェックボックス

目次