ionic 表單輸入 ion-checkbox ion-radio ion-toggle ion-spinner

學(xué)習(xí)要點：
1.復(fù)選按鈕 : ion-checkbox
2.單選按鈕 : ion-radio
3.開關(guān)按鈕 : ion-toggle
4.等待指示器 : ion-spinner

1.復(fù)選按鈕 : ion-checkbox
ionic 的復(fù)選按鈕脫胎于 HTML 標(biāo)準(zhǔn)的 checkbox 元素，可以在一組選項中 同時選中多個：

使用 ion-checkbox 指令聲明復(fù)選按鈕元素：
<ion-checkbox>...</ion-checkbox>
與標(biāo)準(zhǔn)的 checkbox 相比，使用 ionic 的 ion-checkbox 有幾個優(yōu)勢：

1.樣式更美觀，與移動端的 UI 更匹配
2.支持?jǐn)?shù)據(jù)綁定。使用可選的 ng-model 屬性，可以直接將選中狀態(tài)綁定到作用域上的
變量

3.直接使用文本子元素作為標(biāo)簽

2.單選按鈕 ： ion-radio
和復(fù)選按鈕類似， ionic 的單選按鈕脫胎于 HTML 標(biāo)準(zhǔn)的 radio 元素，用來在一組互斥的 選
項中進行選擇：

使用 ion-radio 聲明單選按鈕元素：
<ion-radio>...</ion-radio>
和 HTML 的 radio 相比， ion-radio 的改進也是明顯的：
1. 與移動端的 UI 更匹配
2. 使用可選的 ng-model 屬性，實現(xiàn)與作用域變量的數(shù)據(jù)綁定
3. 使用可選的 ng-value 屬性，可以使用作用域變量設(shè)置單選按鈕對應(yīng)的值

3. 開關(guān)按鈕 : ion-toggle
開關(guān)和復(fù)選按鈕的作用一致，都是從一組選項中進行多重選擇。
在 ionic 中，使用 ion-toggle 指令聲明開關(guān)元素：

<ion-toggle></ion-toggle>
ion-toggle 有兩個可選的屬性：
ng-model - 模型變量
和復(fù)選按鈕一樣，開關(guān)按鈕也可以使用可選的 ng-model 屬性實現(xiàn)與作用域變量 的雙向綁定。

toggle-class - 樣式類
可以使用可選的 toggle-class 屬性為開關(guān)按鈕聲明額外的樣式。比如： toggle-{color} 用來聲
明配色方案。

4.等待指示器 : ion-spinner
當(dāng) App 在進行耗時地處理時，給用戶一個明顯的提示反饋，可以營造良好的體驗。
ionic 的 spinner 使用 SVG 和 JavaScript 實現(xiàn)，因此可以縮放、添加樣式并具有動畫效果。

使用 ion-spinner 指令聲明 spinner 對象：
<ion-spinner></ion-spinner>
ion-spinner 的 icon 屬性是可選的，用來指定 SVG 圖標(biāo)名稱。請注意，這里的名稱不是 ionioncs
的圖標(biāo)名稱。當(dāng)前支持的 SVG 圖標(biāo)名稱請參見示例代碼。
ionic 的預(yù)置樣式類： spinner-{color}可以用來聲明配色方案，也可以 自定義樣式，比如設(shè)置
大小等：
.spinner svg{
width: 28px;
height: 28px;
stroke: #444;
fill: #444;
}

交流QQ群：187269144 

QQ群2：438443293

QQ群3：248403526