ionic-CSS：Toggle(切换开关)+Checkbox(多选框)+Radio Button List(单选框)+Range(滑块控件)+Select(选择器)

Toggle(切换开关)

切换开关类似与 HTML 的 checkbox 标签，但它更易于在移动设备上使用。
切换开关可以使用toggle-assertive 来指定颜色。

该实例有是多个切换开关列表。注意，每个选项的item 类后需要添加item-toggle 类。

 

  
 
    HTML5 
     
       
      
 
        
 
      
 
     
  
 

  ...

---

Checkbox(多选框)

ionic 里面的 Checkbox 和普通的 Checkbox 效果上其实相差不大，只是样式上有所不同。 以下实例颜色了多个多选框的列表。
注意，每个选项的 item 类后需要添加 item-checkbox 类。 多选框可以使用checkbox-assertive 来指定颜色。

 

  Red 
  Yellow 
  Pink

---

Radio Button List(单选框)

ionic 当选按钮与标准 type="radio" 的 input元素类似。以下展示了现代app类型的单选按钮。 每个 item-radio 中的 type="radio" 的 input 元素的 name 属性都相同。radio-icon 类用于是否显示图标。 ionic 在单选项中使用了
元素，使其更易点击。

 
  Choose A 
  Choose B

---

Range(滑块控件)

ionic Range 是一个滑块控件，ionic 为 Range 提供了很多种默认的样式。而且你可以在许多种元素里使用它比如列表或者 Card 。

---

Select(选择器)

ionic select 的 select 相比原生的要更加美观些。但是弹出的可选选项样式是浏览器默认的。
每个平台上的可选项样式都是不一样的，在PC电脑的浏览器上，你会看到传统的下拉界面，Android 上会弹出单选按钮选项，iOS 有个滚轮操作界面。

 

   
    
 
      Lightsaber 
    
 
     
      Blue 
      Green 
      Red