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: