Радиокнопки Ionic
Радиокнопки Ionic похожи на стандартный элемент input с type="radio". Ниже показаны радиокнопки в современном стиле приложения.
Атрибут name элементов input с type="radio" в каждом item-radio одинаков. Класс 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>
Попробуйте »
Результат следующий:
Другие расширения