来扯点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