Toggle(切換開關(guān))

切換開關(guān)類似與 HTML 的 checkbox 標(biāo)簽，但它更易于在移動(dòng)設(shè)備上使用。
切換開關(guān)可以使用toggle-assertive 來(lái)指定顏色。

<label class="toggle"> 
  <input type="checkbox"> 
  <div class="track"> 
    <div class="handle"></div> 
  </div>
</label>

該實(shí)例有是多個(gè)切換開關(guān)列表。注意，每個(gè)選項(xiàng)的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 效果上其實(shí)相差不大，只是樣式上有所不同。 以下實(shí)例顏色了多個(gè)多選框的列表。
注意，每個(gè)選項(xiàng)的 item 類后需要添加 item-checkbox 類。 多選框可以使用checkbox-assertive 來(lái)指定顏色。

<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 當(dāng)選按鈕與標(biāo)準(zhǔn) type="radio" 的 input元素類似。以下展示了現(xiàn)代app類型的單選按鈕。 每個(gè) item-radio 中的 type="radio" 的 input 元素的 name 屬性都相同。radio-icon 類用于是否顯示圖標(biāo)。 ionic 在單選項(xiàng)中使用了 <label>
元素，使其更易點(diǎn)擊。

<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 是一個(gè)滑塊控件，ionic 為 Range 提供了很多種默認(rèn)的樣式。而且你可以在許多種元素里使用它比如列表或者 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 相比原生的要更加美觀些。但是彈出的可選選項(xiàng)樣式是瀏覽器默認(rèn)的。
每個(gè)平臺(tái)上的可選項(xiàng)樣式都是不一樣的，在PC電腦的瀏覽器上，你會(huì)看到傳統(tǒng)的下拉界面，Android 上會(huì)彈出單選按鈕選項(xiàng)，iOS 有個(gè)滾輪操作界面。

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