Ionic - Optionsfeld

Radio buttonssind eine andere Form eines Elements, auf die wir in diesem Kapitel eingehen werden. Der Unterschied zwischen Optionsfeldern aus Umschalt- und Kontrollkästchen besteht darin, dass Sie bei Verwendung des ersteren nur ein Optionsfeld aus der Liste auswählen. In letzterem Fall können Sie mehrere auswählen.

Hinzufügen von Optionsfeldern

Da immer mehr als ein Optionsfeld zur Auswahl steht, ist es am besten, eine Liste zu erstellen. Wir haben dies getan, wann immer wir mehrere Elemente wollten. Die Listenelementklasse wird seinitem-radio. Wieder werden wir verwendenlabeldafür, wie wir es bei allen anderen Formen verwendet haben. Eingang hat dienameAttribut. Dieses Attribut gruppiert alle Schaltflächen, die Sie als mögliche Auswahl verwenden möchten. Dasitem-contentKlasse wird verwendet, um Optionen klar anzuzeigen. Am Ende werden wir die verwendenradio-icon Klasse, um das Häkchensymbol hinzuzufügen, mit dem die vom Benutzer ausgewählte Option markiert wird.

Im folgenden Beispiel gibt es vier Optionsfelder, und das zweite ist ausgewählt.

<div class = "list">
   <label class = "item item-radio">
      <input type = "radio" name = "group1" />
      <div class = "item-content">
         Choice 1
      </div>
      <i class = "radio-icon ion-checkmark"></i>
   </label>

   <label class = "item item-radio">
      <input type = "radio" name = "group1" />
      <div class = "item-content">
         Choice 2
      </div>
      <i class = "radio-icon ion-checkmark"></i>
   </label>

   <label class = "item item-radio">
      <input type = "radio" name = "group1" />
      <div class = "item-content">
         Choice 3
      </div>
      <i class = "radio-icon ion-checkmark"></i>
   </label>

   <label class = "item item-radio">
      <input type = "radio" name = "group1" />
      <div class = "item-content">
         Choice 4
      </div>
      <i class = "radio-icon ion-checkmark"></i>
   </label>
</div>

Der obige Code erzeugt den folgenden Bildschirm:

Mehrere Optionsfeldgruppen

Manchmal möchten Sie mehr als eine Gruppe erstellen. Das ist was dienameAttribut ist gemacht für; Im folgenden Beispiel werden die ersten beiden und die letzten beiden Schaltflächen als zwei Optionsgruppen gruppiert.

Wir werden die verwenden item-dividerKlasse, um zwei Gruppen zu trennen. Beachten Sie, dass die erste Gruppe die hatname Attribut gleich group1 und der zweite verwendet group2.

<div class = "list">
   <div class = " item item-divider">
      Group1
   </div>

   <label class = "item item-radio">
      <input type = "radio" name = "group1" />
      <div class = "item-content">
         Choice 1
      </div>
      <i class = "radio-icon ion-checkmark"></i>
   </label>

   <label class = "item item-radio">
      <input type = "radio" name = "group1" />
      <div class = "item-content">
         Choice 2
      </div>
      <i class = "radio-icon ion-checkmark"></i>
   </label>

   <div class = "item item-divider">
      Group2
   </div>

   <label class = "item item-radio">
      <input type = "radio" name = "group2" />
      <div class = "item-content">
         Choice 3
      </div>
      <i class = "radio-icon ion-checkmark"></i>
   </label>

   <label class = "item item-radio">
      <input type = "radio" name = "group2" />
      <div class = "item-content">
         Choice 4
      </div>
      <i class = "radio-icon ion-checkmark"></i>
   </label>
</div>

Der obige Code erzeugt den folgenden Bildschirm: