Ionico - Casella di controllo
Ionic checkboxè quasi uguale a toggle. Questi due hanno uno stile diverso ma vengono utilizzati per gli stessi scopi.
Aggiunta della casella di controllo
Quando si crea un modulo di casella di controllo, è necessario aggiungere il file checkboxnome della classe sia per l'etichetta che per gli elementi di input. L'esempio seguente mostra due semplici caselle di controllo, una è selezionata e l'altra no.
<label class = "checkbox">
<input type = "checkbox">
</label>
<label class = "checkbox">
<input type = "checkbox">
</label>
Il codice precedente produrrà la seguente schermata:

Caselle di controllo multiple
Come abbiamo già mostrato, l'elenco verrà utilizzato per più elementi. Ora useremo il fileitem-checkbox classe per ogni elemento dell'elenco.
<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>
Il codice precedente produrrà la seguente schermata:

Casella di controllo per lo stile
Quando vuoi applicare uno stile a una casella di controllo, devi applicare qualsiasi classe di colore ionica con checkboxprefisso. Controlla il seguente esempio per vedere come appare. Useremo l'elenco delle caselle di controllo per questo esempio.
<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>
Il codice precedente produrrà la seguente schermata:
