ionic 單選框
ionic 單選按鈕與標準 type="radio" 的 input元素類似。以下展示了現代app型別的單選按鈕。
每個 item-radio 中的 type="radio" 的 input 元素的 name 屬性都相同。radio-icon 類用於是否顯示圖示。
ionic 在單選項中使用了 <label> 元素,使其更易點選。
例項
<div class="list">
<label class="item item-radio">
<input type="radio" name="group" value="go" checked="checked">
<div class="radio-content">
<div class="item-content">
Go
</div>
<i class="radio-icon ion-checkmark"></i>
</div>
</label>
<label class="item item-radio">
<input type="radio" name="group" value="python">
<div class="radio-content">
<div class="item-content">
Python
</div>
<i class="radio-icon ion-checkmark"></i>
</div>
</label>
<label class="item item-radio">
<input type="radio" name="group" value="ruby">
<div class="radio-content">
<div class="item-content">
Ruby
</div>
<i class="radio-icon ion-checkmark"></i>
</div>
</label>
<label class="item item-radio">
<input type="radio" name="group" value=".net">
<div class="radio-content">
<div class="item-content">
.Net
</div>
<i class="radio-icon ion-checkmark"></i>
</div>
</label>
<label class="item item-radio">
<input type="radio" name="group" value="java">
<div class="radio-content">
<div class="item-content">
Java
</div>
<i class="radio-icon ion-checkmark"></i>
</div>
</label>
<label class="item item-radio">
<input type="radio" name="group" value="php">
<div class="radio-content">
<div class="item-content">
PHP
</div>
<i class="radio-icon ion-checkmark"></i>
</div>
</label>
</div>
執行效果如下: