来扯点ionic3[5] 轻松上手表单：这些组件可以玩一年

本系列文集：来扯点ionic3

表单几乎是每一个应用程序中必不可少的一部分，在各类 HTML 教材中，表单也经常被拿出来作为独立一章来讲解，在 ionic 中，不直接使用 input 标签编写表单控件，而是有专门为仿真原生 ios/android 系统的表单组件。

在 ionic 中制作表单，需要列表的配合，列表的使用可参阅下文：

来扯点ionic3[4] 结构型指令和列表渲染

下面就来介绍一些表单组件的使用：

组件概览

文本输入：Input 组件

基本使用

    
      标签
      
    
 

且注意 ion-input 是有结束标签的，并非 input 一样的单标签。

type属性

type 属性与 html 中 input 标签的 type 属性是类似的，可以使用 text、password 这类值，但是不支持 radio、checkbox 等非文本输入的类型。

值得一提的是，在移动应用开发时，input的type和其调出的手机键盘是紧密相连的，因此在开发时应该根据input的实际功能，细致地区分它们的 type，你也可以利用它们来验证这些值的合法性，常用的有：email、tel、url、number

tel

url

email

此外，如果你需要不带任何符号的纯数字键盘，可以用 pattern 属性用正则表达式将输入的内容限定位纯数字

Label 样式

ionic内置了几种 label 的展现样式，你可以像这样来定义它：

website
Website
Website
Website

不同的 label 样式

fixed 和默认的区别在于，默认仅仅是把标签和控件排在一行内，而 fixed 固定了标签的宽度，使用了 fixed 能让表单更整齐。

stacked 把标签固定在控件的左上方，使控件可以占据一整行；floating乍一看除了上面多出了一段空白，没有什么特别的地方，但它被激活以后，就会触发动画变成
stacked的样子（这在 Android 的应用中经常出现）。

动图：stacked 和 floating是这么玩的

列表单选：Radio组件

如果说 input 和我们写网页的习惯基本类似，那单选组件可能就不太一样了，毕竟选择操作在传统网页上和移动应用是有非常大的差别的。

基本使用

    请选择：
    
      选项1
      
    
    
      选项2
      
    
  

• 在 ion-list 标签上使用 radio-group 指令，表示其内部的 ion-radio 为同一组。
• 借助 ion-list-header 放置这一组选项的标题。

主要属性

与 input[type=radio] 一样，有 checked、disabled和value这三个属性。

Yes or No: Toggle组件

常用于设置页面的开关组件。

基本用法

    Pepperoni
    
  

image.png

主要属性

与 input[type=checkbox] 一样，有 checked、disabled和value这三个属性。

弹框选择：Select组件

在点击控件时，会弹出一个 Alert 模态框。

基本使用

    
      标签
      
        选项1
        选项2
      
    
  

multiple 属性

使用 multiple 属性可将 select 变为多选，这时 select 的值会变成一个数组。

interface 属性

interface属性可以将弹框更为其它的样式，支持 action-sheet 和 popover 两个值，interface 属性不能和 multiple 属性共同使用。

action-sheet 的选择方式

popover 的选择方式

日期/时间选择：Datetime组件

基本使用

    
      Date
      
    
  

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

效果是这样的

pickerFormat 属性

pickerFormat规定了日期选择器中的格式。一般情况下，我们不需要定义这一个属性，除非我们希望选择器里的格式和控件内的格式不同，例如，下面这个例子，我们要求用户选择的时间精确到秒，但是控件的显示只精确到分钟。

min 属性和 max 属性

min 和max 可以定义选择器的时间范围，例如下面的例子将时间限定在2016年1月1日到2016年5月30日之间：

范围选择：Range组件

Range组件允许用户通过滑块来选择一个给定范围内的值，默认的范围是0-100。

基本使用

    标题
    
      
    
  

pin 属性

pin 属性规定用户在滑动时，是否在滑块上方显示数字。

Android中带有 pin 的 风格

min 属性和 max 属性

min 和 max 规定了选取区间，即最大值和最小值。

step 属性和 snaps 属性

step 规定了滑块的精度，默认位1，若同时使用了 snaps，则可以在滑轨上标注出每一个 step 的刻度。

    标题
    
      
    
  

动图：带有 step 和 snaps 的 Range 组件

按钮

按钮和上述控件不同，它不使用 ion-button 来构件，而是使用普通的 button 标签配合 ion-button 指令来实现效果,并且按钮可以不放置在 ion-list 容器中。

基本使用

按钮

调整颜色

color 属性提供了集中常用的颜色，它们是内置在模板中的，默认值为 primary, 你可以根据业务需要使用其它的值，这些值可以在项目中的 varible.scss 中定制。

  primary
  secondary
  danger
  dark
  light

调整形状

直接在 button 标签中定义以下指令可以定义按钮的形状：

block 全宽
outline 线框按钮
clear 无背景、无边框（相当于文字按钮）
full 全宽（去除圆角）
round 大圆角
上述几个指令可以根据实际组合使用

 full
  block
  clear
  round
  outline
  round+outline
  block+round
  full+outline

image.png

调整大小

large 和 small 两个属性可以定制大号和小号的按钮。

 large
  default
  small

提供的参考文档

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

下一章：来扯点ionic3[6] 继续上手表单：魔法般的双向数据绑定