kotak tunggal ionik

tombol pemilihan ionik dan jenis standar yang sama = "radio" elemen input. Berikut ini menunjukkan jenis aplikasi tombol radio modern.

Setiap item-radio type = nama atribut "radio" dari elemen input yang sama. radio-icon kelas untuk ikon ditampilkan.

ionik menggunakan <label> elemen dalam satu pilihan, sehingga lebih mudah untuk klik.

contoh

<div class="list">

<label class="item item-radio">
  <input type="radio" name="group" value="go" checked="checked">
  <div class="item-content">
    Go
  </div>
  <i class="radio-icon ion-checkmark"></i>
</label>

<label class="item item-radio">
  <input type="radio" name="group" value="python">
  <div class="item-content">
    Python
  </div>
  <i class="radio-icon ion-checkmark"></i>
</label>

<label class="item item-radio">
  <input type="radio" name="group" value="ruby">
  <div class="item-content">
    Ruby
  </div>
  <i class="radio-icon ion-checkmark"></i>
</label>

<label class="item item-radio">
  <input type="radio" name="group" value=".net">
  <div class="item-content">
    .Net
  </div>
  <i class="radio-icon ion-checkmark"></i>
</label>

<label class="item item-radio">
  <input type="radio" name="group" value="java">
  <div class="item-content">
    Java
  </div>
  <i class="radio-icon ion-checkmark"></i>
</label>

<label class="item item-radio">
  <input type="radio" name="group" value="php">
  <div class="item-content">
    PHP
  </div>
  <i class="radio-icon ion-checkmark"></i>
</label>

</div>

Coba »

hasil operasi adalah sebagai berikut: