Ionic - przycisk radiowy

Radio buttonsto kolejna forma elementu, którym zajmiemy się w tym rozdziale. Różnica między przyciskami opcji w formularzach przełączania i pól wyboru polega na tym, że podczas korzystania z pierwszego z nich wybierasz tylko jeden przycisk opcji z listy. Ponieważ ta ostatnia pozwala wybrać więcej niż jeden.

Dodawanie przycisków radiowych

Ponieważ zawsze będzie więcej niż jeden przycisk opcji do wyboru, najlepszym sposobem jest utworzenie listy. Robiliśmy to zawsze, gdy chcieliśmy mieć wiele elementów. Klasą elementu listy będzieitem-radio. Ponownie użyjemylabeldo tego, jak używaliśmy we wszystkich innych formach. Wejście będzie miałonameatrybut. Ten atrybut grupuje wszystkie przyciski, których chcesz użyć jako możliwego wyboru. Plikitem-contentklasa służy do wyraźnego wyświetlania opcji. Na koniec użyjemyradio-icon klasy, aby dodać ikonę znacznika wyboru, która będzie używana do oznaczania opcji wybranej przez użytkownika.

W poniższym przykładzie są cztery przyciski opcji, a drugi jest wybrany.

<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>

Powyższy kod wygeneruje następujący ekran -

Wiele grup przycisków opcji

Czasami chcesz utworzyć więcej niż jedną grupę. To właśnie jestnameatrybut jest przeznaczony; Poniższy przykład zgrupuje pierwsze dwa i ostatnie dwa przyciski jako dwie grupy opcji.

Będziemy używać item-dividerklasa, aby oddzielić dwie grupy. Zauważ, że pierwsza grupa ma rozszerzeniename atrybut równy group1 a drugi używa 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>

Powyższy kod wygeneruje następujący ekran -