กล่องเดียวอิออน

ปุ่มเลือกตั้งไอออนิกและประเภทมาตรฐานที่คล้ายกัน = "วิทยุ" องค์ประกอบเข้า ต่อไปนี้จะแสดงให้เห็นถึงประเภทของแอปปุ่มที่ทันสมัย

แต่ละรายการวิทยุ type = ชื่อของแอตทริบิวต์ "วิทยุ" ขององค์ประกอบการป้อนข้อมูลที่เหมือนกัน ระดับวิทยุไอคอนไอคอนจะแสดง

อิออนโดยใช้ <label> องค์ประกอบในการเป็นตัวเลือกเดียวทำให้ง่ายต่อการคลิก

ตัวอย่าง

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

ลอง»

ผลการดำเนินงานมีดังนี้