ionic-CSS：Toggle(切换开关)+Checkbox(

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>