ionic 表单输入 ion-checkbox ion-radio ion-toggle ion-spinner

学习要点：
1.复选按钮 : ion-checkbox
2.单选按钮 : ion-radio
3.开关按钮 : ion-toggle
4.等待指示器 : ion-spinner

1.复选按钮 : ion-checkbox
ionic 的复选按钮脱胎于 HTML 标准的 checkbox 元素，可以在一组选项中 同时选中多个：

使用 ion-checkbox 指令声明复选按钮元素：
<ion-checkbox>...</ion-checkbox>
与标准的 checkbox 相比，使用 ionic 的 ion-checkbox 有几个优势：

1.样式更美观，与移动端的 UI 更匹配
2.支持数据绑定。使用可选的 ng-model 属性，可以直接将选中状态绑定到作用域上的
变量

3.直接使用文本子元素作为标签

2.单选按钮 ： ion-radio
和复选按钮类似， ionic 的单选按钮脱胎于 HTML 标准的 radio 元素，用来在一组互斥的 选
项中进行选择：

使用 ion-radio 声明单选按钮元素：
<ion-radio>...</ion-radio>
和 HTML 的 radio 相比， ion-radio 的改进也是明显的：
1. 与移动端的 UI 更匹配
2. 使用可选的 ng-model 属性，实现与作用域变量的数据绑定
3. 使用可选的 ng-value 属性，可以使用作用域变量设置单选按钮对应的值

3. 开关按钮 : ion-toggle
开关和复选按钮的作用一致，都是从一组选项中进行多重选择。
在 ionic 中，使用 ion-toggle 指令声明开关元素：

<ion-toggle></ion-toggle>
ion-toggle 有两个可选的属性：
ng-model - 模型变量
和复选按钮一样，开关按钮也可以使用可选的 ng-model 属性实现与作用域变量 的双向绑定。

toggle-class - 样式类
可以使用可选的 toggle-class 属性为开关按钮声明额外的样式。比如： toggle-{color} 用来声
明配色方案。

4.等待指示器 : ion-spinner
当 App 在进行耗时地处理时，给用户一个明显的提示反馈，可以营造良好的体验。
ionic 的 spinner 使用 SVG 和 JavaScript 实现，因此可以缩放、添加样式并具有动画效果。

使用 ion-spinner 指令声明 spinner 对象：
<ion-spinner></ion-spinner>
ion-spinner 的 icon 属性是可选的，用来指定 SVG 图标名称。请注意，这里的名称不是 ionioncs
的图标名称。当前支持的 SVG 图标名称请参见示例代码。
ionic 的预置样式类： spinner-{color}可以用来声明配色方案，也可以 自定义样式，比如设置
大小等：
.spinner svg{
width: 28px;
height: 28px;
stroke: #444;
fill: #444;
}

交流QQ群：187269144 

QQ群2：438443293

QQ群3：248403526