Toggle(切换开关)
切换开关类似与 HTML 的 checkbox 标签,但它更易于在移动设备上使用。
切换开关可以使用toggle-assertive
来指定颜色。
<label class="toggle">
<input type="checkbox">
<div class="track">
<div class="handle"></div>
</div>
</label>
该实例有是多个切换开关列表。注意,每个选项的item
类后需要添加item-toggle
类。
<ul class="list">
<li class="item item-toggle">
HTML5
<label class="toggle toggle-assertive">
<input type="checkbox">
<div class="track">
<div class="handle"></div>
</div>
</label>
</li>
...
</ul>
Checkbox(多选框)
ionic 里面的 Checkbox 和普通的 Checkbox 效果上其实相差不大,只是样式上有所不同。 以下实例颜色了多个多选框的列表。
注意,每个选项的 item 类后需要添加 item-checkbox 类。 多选框可以使用checkbox-assertive
来指定颜色。
<ion-list>
<ion-checkbox ng-model="filter.blue">Red</ion-checkbox>
<ion-checkbox ng-model="filter.yellow">Yellow</ion-checkbox>
<ion-checkbox ng-model="filter.pink">Pink</ion-checkbox>
</ion-list>
Radio Button List(单选框)
ionic 当选按钮与标准 type="radio" 的 input元素类似。以下展示了现代app类型的单选按钮。 每个 item-radio 中的 type="radio" 的 input 元素的 name 属性都相同。radio-icon 类用于是否显示图标。 ionic 在单选项中使用了 <label>
元素,使其更易点击。
<ion-list>
<ion-radio ng-model="choice" ng-value="'A'">Choose A</ion-radio>
<ion-radio ng-model="choice" ng-value="'B'">Choose B</ion-radio>
</ion-list>
Range(滑块控件)
ionic Range 是一个滑块控件,ionic 为 Range 提供了很多种默认的样式。而且你可以在许多种元素里使用它比如列表或者 Card 。
<div class="item range">
<i class="icon ion-volume-low"></i>
<input type="range" name="volume">
<i class="icon ion-volume-high"></i>
</div>
<div class="list">
<div class="item range range-positive">
<i class="icon ion-ios-sunny-outline"></i>
<input type="range" name="volume" min="0" max="100" value="33">
<i class="icon ion-ios-sunny"></i>
</div>
</div>
Select(选择器)
ionic select 的 select 相比原生的要更加美观些。但是弹出的可选选项样式是浏览器默认的。
每个平台上的可选项样式都是不一样的,在PC电脑的浏览器上,你会看到传统的下拉界面,Android 上会弹出单选按钮选项,iOS 有个滚轮操作界面。
<div class="list">
<label class="item item-input item-select">
<div class="input-label">
Lightsaber
</div>
<select>
<option>Blue</option>
<option selected>Green</option>
<option>Red</option>
</select>
</label>
</div>