来扯点ionic3[5] 轻松上手表单：这些组件可以玩一年
本系列文集：来扯点ionic3
表单几乎是每一个应用程序中必不可少的一部分，在各类 HTML 教材中，表单也经常被拿出来作为独立一章来讲解，在 ionic 中，不直接使用 input 标签编写表单控件，而是有专门为仿真原生 ios/android 系统的表单组件。
在 ionic 中制作表单，需要列表的配合，列表的使用可参阅下文：
下面就来介绍一些表单组件的使用：
组件概览
文本输入：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>
