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