本系列文集：來扯點ionic3

表單幾乎是每一個應用程序中必不可少的一部分，在各類 HTML 教材中，表單也經常被拿出來作為獨立一章來講解，在 ionic 中，不直接使用 input 標簽編寫表單控件，而是有專門為仿真原生 ios/android 系統的表單組件。

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

來扯點ionic3[4] 結構型指令和列表渲染

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

組件概覽

文本輸入：Input 組件

基本使用

<ion-list>
    <ion-item>
      <ion-label>標簽</ion-label>
      <ion-input type="text" value=""></ion-input>
    </ion-item>
 </ion-list>

且注意 ion-input 是有結束標簽的，并非 input 一樣的單標簽。

type屬性

type 屬性與 html 中 input 標簽的 type 屬性是類似的，可以使用 text、password 這類值，但是不支持 radio、checkbox 等非文本輸入的類型。

值得一提的是，在移動應用開發時，input的type和其調出的手機鍵盤是緊密相連的，因此在開發時應該根據input的實際功能，細致地區分它們的 type，你也可以利用它們來驗證這些值的合法性，常用的有：email、tel、url、number

tel

url

email

此外，如果你需要不帶任何符號的純數字鍵盤，可以用 pattern 屬性用正則表達式將輸入的內容限定位純數字

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

Label 樣式

ionic內置了幾種 label 的展現樣式，你可以像這樣來定義它：

<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 和默認的區別在于，默認僅僅是把標簽和控件排在一行內，而 fixed 固定了標簽的寬度，使用了 fixed 能讓表單更整齊。

stacked 把標簽固定在控件的左上方，使控件可以占據一整行；floating乍一看除了上面多出了一段空白，沒有什么特別的地方，但它被激活以后，就會觸發動畫變成
stacked的樣子（這在 Android 的應用中經常出現）。

動圖：stacked 和 floating是這么玩的

列表單選：Radio組件

如果說 input 和我們寫網頁的習慣基本類似，那單選組件可能就不太一樣了，畢竟選擇操作在傳統網頁上和移動應用是有非常大的差別的。

基本使用

<ion-list radio-group>
    <ion-list-header>請選擇：</ion-list-header>
    <ion-item>
      <ion-label>選項1</ion-label>
      <ion-radio value="1" checked></ion-radio>
    </ion-item>
    <ion-item>
      <ion-label>選項2</ion-label>
      <ion-radio value="2"></ion-radio>
    </ion-item>
  </ion-list>

• 在 ion-list 標簽上使用 radio-group 指令，表示其內部的 ion-radio 為同一組。
• 借助 ion-list-header 放置這一組選項的標題。

主要屬性

與 input[type=radio] 一樣，有 checked、disabled和value這三個屬性。

Yes or No: Toggle組件

常用于設置頁面的開關組件。

基本用法

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

image.png

主要屬性

與 input[type=checkbox] 一樣，有 checked、disabled和value這三個屬性。

彈框選擇：Select組件

在點擊控件時，會彈出一個 Alert 模態框。

基本使用

<ion-list>
    <ion-item>
      <ion-label>標簽</ion-label>
      <ion-select>
        <ion-option value="1">選項1</ion-option>
        <ion-option value="2">選項2</ion-option>
      </ion-select>
    </ion-item>
  </ion-list>

multiple 屬性

使用 multiple 屬性可將 select 變為多選，這時 select 的值會變成一個數組。

<ion-select multiple="true">

interface 屬性

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

action-sheet 的選擇方式

popover 的選擇方式

日期/時間選擇：Datetime組件

基本使用

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

displayFormat 屬性

displayFormat 定義了日期在控件中以怎樣的格式出現，對于國內開發者，常見的格式有：

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

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

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

效果是這樣的

pickerFormat 屬性

pickerFormat規定了日期選擇器中的格式。一般情況下，我們不需要定義這一個屬性，除非我們希望選擇器里的格式和控件內的格式不同，例如，下面這個例子，我們要求用戶選擇的時間精確到秒，但是控件的顯示只精確到分鐘。

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

min 屬性和 max 屬性

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

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

范圍選擇：Range組件

Range組件允許用戶通過滑塊來選擇一個給定范圍內的值，默認的范圍是0-100。

基本使用

<ion-list>
    <ion-list-header>標題</ion-list-header>
    <ion-item>
      <ion-range pin="true"></ion-range>
    </ion-item>
  </ion-list>

pin 屬性

pin 屬性規定用戶在滑動時，是否在滑塊上方顯示數字。

Android中帶有 pin 的 風格

min 屬性和 max 屬性

min 和 max 規定了選取區間，即最大值和最小值。

step 屬性和 snaps 屬性

step 規定了滑塊的精度，默認位1，若同時使用了 snaps，則可以在滑軌上標注出每一個 step 的刻度。

<ion-list>
    <ion-list-header>標題</ion-list-header>
    <ion-item>
      <ion-range pin="true" step="5" snaps="true"></ion-range>
    </ion-item>
  </ion-list>

動圖：帶有 step 和 snaps 的 Range 組件

按鈕

按鈕和上述控件不同，它不使用 ion-button 來構件，而是使用普通的 button 標簽配合 ion-button 指令來實現效果,并且按鈕可以不放置在 ion-list 容器中。

基本使用

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

調整顏色

color 屬性提供了集中常用的顏色，它們是內置在模板中的，默認值為 primary, 你可以根據業務需要使用其它的值，這些值可以在項目中的 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>

調整形狀

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

block 全寬
outline 線框按鈕
clear 無背景、無邊框（相當于文字按鈕）
full 全寬（去除圓角）
round 大圓角
上述幾個指令可以根據實際組合使用

 <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

調整大小

large 和 small 兩個屬性可以定制大號和小號的按鈕。

 <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

下一章：來扯點ionic3[6] 繼續上手表單：魔法般的雙向數據綁定