Ionic-checkbox
提供:Dev Guides
イオン-チェックボックス
- イオンチェックボックス*はトグルとほぼ同じです。 これら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>
上記のコードは、次の画面を生成します-