×
广告

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

96
忠叔
2017.11.19 18:19* 字数 1574

本系列文集:来扯点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] 继续上手表单:魔法般的双向数据绑定

来扯点ionic
Web note ad 1