本系列文集：來扯點(diǎn)ionic3

表單幾乎是每一個(gè)應(yīng)用程序中必不可少的一部分佃蚜，在各類 HTML 教材中洼裤，表單也經(jīng)常被拿出來作為獨(dú)立一章來講解砾跃，在 ionic 中，不直接使用 input 標(biāo)簽編寫表單控件片迅，而是有專門為仿真原生 ios/android 系統(tǒng)的表單組件。

在 ionic 中制作表單皆辽，需要列表的配合柑蛇，列表的使用可參閱下文：

來扯點(diǎn)ionic3[4] 結(jié)構(gòu)型指令和列表渲染

下面就來介紹一些表單組件的使用：

組件概覽

文本輸入：Input 組件

基本使用

<ion-list>
    <ion-item>
      <ion-label>標(biāo)簽</ion-label>
      <ion-input type="text" value=""></ion-input>
    </ion-item>
 </ion-list>

且注意 ion-input 是有結(jié)束標(biāo)簽的，并非 input 一樣的單標(biāo)簽驱闷。

type屬性

type 屬性與 html 中 input 標(biāo)簽的 type 屬性是類似的耻台，可以使用 text、password 這類值空另，但是不支持 radio盆耽、checkbox 等非文本輸入的類型。

值得一提的是，在移動(dòng)應(yīng)用開發(fā)時(shí)摄杂，input的type和其調(diào)出的手機(jī)鍵盤是緊密相連的坝咐，因此在開發(fā)時(shí)應(yīng)該根據(jù)input的實(shí)際功能，細(xì)致地區(qū)分它們的 type析恢，你也可以利用它們來驗(yàn)證這些值的合法性墨坚，常用的有：email、tel氮昧、url框杜、number

tel

url

email

此外，如果你需要不帶任何符號(hào)的純數(shù)字鍵盤袖肥，可以用 pattern 屬性用正則表達(dá)式將輸入的內(nèi)容限定位純數(shù)字

<ion-input type="number" pattern="[0-9]*" value=""></ion-input>

Label 樣式

ionic內(nèi)置了幾種 label 的展現(xiàn)樣式咪辱，你可以像這樣來定義它：

<ion-label>website</ion-label>
<ion-label fixed>Website</ion-label>
<ion-label stacked>Website</ion-label>
<ion-label floating>Website</ion-label>

不同的 label 樣式

fixed 和默認(rèn)的區(qū)別在于，默認(rèn)僅僅是把標(biāo)簽和控件排在一行內(nèi)椎组，而 fixed 固定了標(biāo)簽的寬度油狂，使用了 fixed 能讓表單更整齊。

stacked 把標(biāo)簽固定在控件的左上方寸癌，使控件可以占據(jù)一整行专筷；floating乍一看除了上面多出了一段空白，沒有什么特別的地方蒸苇，但它被激活以后磷蛹，就會(huì)觸發(fā)動(dòng)畫變成
stacked的樣子（這在 Android 的應(yīng)用中經(jīng)常出現(xiàn)）溪烤。

動(dòng)圖：stacked 和 floating是這么玩的

列表單選：Radio組件

如果說 input 和我們寫網(wǎng)頁的習(xí)慣基本類似味咳，那單選組件可能就不太一樣了，畢竟選擇操作在傳統(tǒng)網(wǎng)頁上和移動(dòng)應(yīng)用是有非常大的差別的檬嘀。

基本使用

<ion-list radio-group>
    <ion-list-header>請(qǐng)選擇：</ion-list-header>
    <ion-item>
      <ion-label>選項(xiàng)1</ion-label>
      <ion-radio value="1" checked></ion-radio>
    </ion-item>
    <ion-item>
      <ion-label>選項(xiàng)2</ion-label>
      <ion-radio value="2"></ion-radio>
    </ion-item>
  </ion-list>

• 在 ion-list 標(biāo)簽上使用 radio-group 指令槽驶，表示其內(nèi)部的 ion-radio 為同一組。
• 借助 ion-list-header 放置這一組選項(xiàng)的標(biāo)題鸳兽。

主要屬性

與 input[type=radio] 一樣掂铐，有 checked、disabled和value這三個(gè)屬性揍异。

Yes or No: Toggle組件

常用于設(shè)置頁面的開關(guān)組件全陨。

基本用法

<ion-item>
    <ion-label>Pepperoni</ion-label>
    <ion-toggle [(ngModel)]="pepperoni"></ion-toggle>
  </ion-item>

image.png

主要屬性

與 input[type=checkbox] 一樣，有 checked衷掷、disabled和value這三個(gè)屬性烤镐。

彈框選擇：Select組件

在點(diǎn)擊控件時(shí)，會(huì)彈出一個(gè) Alert 模態(tài)框棍鳖。

基本使用

<ion-list>
    <ion-item>
      <ion-label>標(biāo)簽</ion-label>
      <ion-select>
        <ion-option value="1">選項(xiàng)1</ion-option>
        <ion-option value="2">選項(xiàng)2</ion-option>
      </ion-select>
    </ion-item>
  </ion-list>

multiple 屬性

使用 multiple 屬性可將 select 變?yōu)槎噙x炮叶，這時(shí) select 的值會(huì)變成一個(gè)數(shù)組碗旅。

<ion-select multiple="true">

interface 屬性

interface屬性可以將彈框更為其它的樣式，支持 action-sheet 和 popover 兩個(gè)值镜悉，interface 屬性不能和 multiple 屬性共同使用祟辟。

action-sheet 的選擇方式

popover 的選擇方式

日期/時(shí)間選擇：Datetime組件

基本使用

<ion-list>
    <ion-item>
      <ion-label>Date</ion-label>
      <ion-datetime displayFormat="MM/DD/YYYY"></ion-datetime>
    </ion-item>
  </ion-list>

displayFormat 屬性

displayFormat 定義了日期在控件中以怎樣的格式出現(xiàn)，對(duì)于國內(nèi)開發(fā)者侣肄，常見的格式有：

YYYY 四位數(shù)年份 (2017)
MM 月份（01-12）
DD 日期 (01-31)
HH 小時(shí)-24小時(shí)制（00-23）
hh 小時(shí)-12小時(shí)制 (01-12)
mm 分鐘 (00-59)
ss 秒 (00-59)

官方文檔中還提供了更多的格式旧困，可以查閱（鏈接在文末）。
例如稼锅，我們這樣定義 displayFormat

<ion-datetime displayFormat="YYYY年MM月DD日 HH:mm"></ion-datetime>

效果是這樣的

pickerFormat 屬性

pickerFormat規(guī)定了日期選擇器中的格式吼具。一般情況下，我們不需要定義這一個(gè)屬性矩距，除非我們希望選擇器里的格式和控件內(nèi)的格式不同拗盒，例如，下面這個(gè)例子锥债，我們要求用戶選擇的時(shí)間精確到秒陡蝇，但是控件的顯示只精確到分鐘。

<ion-datetime displayFormat="HH:mm" pickerFormat="HH mm ss"></ion-datetime>

min 屬性和 max 屬性

min 和max 可以定義選擇器的時(shí)間范圍哮肚，例如下面的例子將時(shí)間限定在2016年1月1日到2016年5月30日之間：

 <ion-datetime displayFormat="YYYY-MM-DD" min="2016" max="2016-05-30"></ion-datetime>

范圍選擇：Range組件

Range組件允許用戶通過滑塊來選擇一個(gè)給定范圍內(nèi)的值登夫，默認(rèn)的范圍是0-100。

基本使用

<ion-list>
    <ion-list-header>標(biāo)題</ion-list-header>
    <ion-item>
      <ion-range pin="true"></ion-range>
    </ion-item>
  </ion-list>

pin 屬性

pin 屬性規(guī)定用戶在滑動(dòng)時(shí)允趟，是否在滑塊上方顯示數(shù)字恼策。

Android中帶有 pin 的 風(fēng)格

min 屬性和 max 屬性

min 和 max 規(guī)定了選取區(qū)間，即最大值和最小值潮剪。

step 屬性和 snaps 屬性

step 規(guī)定了滑塊的精度戏蔑，默認(rèn)位1，若同時(shí)使用了 snaps鲁纠，則可以在滑軌上標(biāo)注出每一個(gè) step 的刻度。

<ion-list>
    <ion-list-header>標(biāo)題</ion-list-header>
    <ion-item>
      <ion-range pin="true" step="5" snaps="true"></ion-range>
    </ion-item>
  </ion-list>

動(dòng)圖：帶有 step 和 snaps 的 Range 組件

按鈕

按鈕和上述控件不同鳍寂，它不使用 ion-button 來構(gòu)件改含，而是使用普通的 button 標(biāo)簽配合 ion-button 指令來實(shí)現(xiàn)效果,并且按鈕可以不放置在 ion-list 容器中。

基本使用

<button ion-button>按鈕</button>

調(diào)整顏色

color 屬性提供了集中常用的顏色迄汛，它們是內(nèi)置在模板中的捍壤，默認(rèn)值為 primary, 你可以根據(jù)業(yè)務(wù)需要使用其它的值，這些值可以在項(xiàng)目中的 varible.scss 中定制鞍爱。

  <button ion-button color="primary">primary</button>
  <button ion-button color="secondary">secondary</button>
  <button ion-button color="danger">danger</button>
  <button ion-button color="dark">dark</button>
  <button ion-button color="light">light</button>

調(diào)整形狀

直接在 button 標(biāo)簽中定義以下指令可以定義按鈕的形狀：

block 全寬
outline 線框按鈕
clear 無背景鹃觉、無邊框（相當(dāng)于文字按鈕）
full 全寬（去除圓角）
round 大圓角
上述幾個(gè)指令可以根據(jù)實(shí)際組合使用

 <button ion-button full>full</button>
  <button ion-button full>block</button>
  <button ion-button clear>clear</button>
  <button ion-button round>round</button>
  <button ion-button outline>outline</button>
  <button ion-button round outline>round+outline</button>
  <button ion-button block round>block+round</button>
  <button ion-button full outline>full+outline</button>

image.png

調(diào)整大小

large 和 small 兩個(gè)屬性可以定制大號(hào)和小號(hào)的按鈕。

 <button ion-button large>large</button>
  <button ion-button>default</button>
  <button ion-button small>small</button>

提供的參考文檔

1. 官方文檔：Label
2. 官方文檔：Input
3. 官方文檔：RadioGroup
4. 官方文檔：Toggle
5. 官方文檔：Select
6. 官方文檔：Datetime
7. 官方文檔：Range
8. 官方文檔：Button

下一章：來扯點(diǎn)ionic3[6] 繼續(xù)上手表單：魔法般的雙向數(shù)據(jù)綁定