來扯點ionic3[5] 輕鬆上手錶單：這些組件能夠玩一年

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

在 ionic 中製做表單，須要列表的配合，列表的使用可參閱下文：

[來扯點ionic3[4] 結構型指令和列表渲染](http://www.jianshu.com/p/ff32...

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

組件概覽

文本輸入：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

此外，若是你須要不帶任何符號的純數字鍵盤，能夠用 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>

fixed 和默認的區別在於，默認僅僅是把標籤和控件排在一行內，而 fixed 固定了標籤的寬度，使用了 fixed 能讓表單更整齊。

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

列表單選：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>

主要屬性

與 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 屬性共同使用。

日期/時間選擇：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 屬性規定用戶在滑動時，是否在滑塊上方顯示數字。

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>

按鈕

按鈕和上述控件不一樣，它不使用 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>

調整大小

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