Ionic2

Posted on Edited on In

Ionic 是一个开源 SDK，使开发人员能够使用熟悉的网络技术（HTML，CSS和JavaScript）来构建高性能，高质量的移动应用程序
Ionic 主要关注应用程序的外观及 UI 交互。它的主要目的是简化前端开发而不是替代 PhoneGap 或其他混合开发工具

学习文档

Ionic Platform Documentation

理解组件

Ionic 应用程序由称为组件（Components）的高级构建块组成。组件允许您快速构建应用程序的界面。Ionic带有许多组件，包括模态窗、弹出窗、卡片……

操作表

Action Sheets 是一个从界面底部向上滑出的对话框，框中含有一组操作按钮。常被用作替代菜单，但不应该用来替代导航。Action Sheets 显示时位于界面的最顶层，可以通过点击 Action Sheets 提供的按钮、屏幕背景或者返回键关闭操作界面

使用

使用 Action Sheets 必须导入 ActionSheetController 组件
创建 Action Sheets 需要调用 ActionSheetsController 组件的 create() 方法，可以在创建 Action Sheets 的同时传递参数也可以在创建之后 调用相应的方法进行设置（如：setTitle() 和 addButton()）

create() 方法参数：

参数 类型 描述
title string Action Sheets 标题
subTitle string Action Sheets 副标题
cssClass string 用户自定义样式类（多个可用空格隔开）
enableBackdropDismiss boolean 是否启用点击背景关闭操作界面，默认为 true
buttons arry<any> 要显示的按钮组

buttons 数组参数：

参数 类型 描述
text string 按钮文字
icon icon 按钮图标
handler any 按钮事件处理逻辑，在事件返回 fals 时操作界面不会被关闭
cssClass string 用户自定义样式类（多个可用空格隔开）
role string 按钮类型，值为 destructive(应用此值会使按钮始终位于按钮最顶部) 或 cancel(应用次值会使按钮始终位于按钮组最底部)，缺少此参数按钮将以默认顺序显示

取消和异步导航

Sass 变量

使用示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
import { ActionSheetController } from 'ionic-angular'

export class MyClass{

 constructor(public actionSheetCtrl: ActionSheetController) {}

 presentActionSheet() {
   let actionSheet = this.actionSheetCtrl.create({
     title: 'Modify your album',
     buttons: [
       {
         text: 'Destructive',
         role: 'destructive',
         handler: () => {
           console.log('Destructive clicked');
         }
       },
       {
         text: 'Archive',
         handler: () => {
           console.log('Archive clicked');
         }
       },
       {
         text: 'Cancel',
         role: 'cancel',
         handler: () => {
           console.log('Cancel clicked');
         }
       }
     ]
   });

   actionSheet.present();
 }
}

提示框

Alerts 是一个对话框，用于向用户提示信息，让用户做出选择或输入数据

使用

使用 Alerts 必须导入 AlertController 组件
创建 Alerts 需要调用 AlertController 组件的 create() 方法，可以在创建 Action Sheets 的同时传递参数也可以在创建之后 调用相应的方法进行设置（如：setTitle() 和 addButton()）

create() 方法参数：

参数 类型 描述
title string 提示框标题
subTitle string 提示框副标题
message string 提示框信息
cssClass string 用户自定义样式类（多个可用空格隔开）
inputs arry 要显示的 input 组，input 类型可以混合，但是 radio 型 和 checkbox 型不能混合
buttons arry 要显示的按钮组，最后一个按钮是主按钮
enableBackdropDismiss boolean 是否启用点击背景关闭提示框，默认为 true

inputs 数组参数

参数 类型 描述
type string input 类型，应该是 HTML 中存在的 input 类型
name string input 的 name
placeholder string input 的 placeholder
value string input 的 value
label string input 的 label (仅适用于 radio 和 checkbox)
checked boolean input 是否选中???
id string input 的 id

buttons 数组参数：

参数 类型 描述
text string 按钮文字
handler any 按钮事件处理逻辑，在事件返回 fals 时操作界面不会被关闭
cssClass string 用户自定义样式类（多个可用空格隔开）
role string 按钮类型，值为 cancel(应用此值会使按钮变为取消按钮)，缺少此参数按钮将以默认顺序显示

取消和异步导航

Sass 变量

使用示例

1
<button ion-button block color="secondary" (click)="doCheckbox()">Show Checkbox Alert</button>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
import { AlertController } from 'ionic-angular';

constructor(private alertCtrl: AlertController) {

}

presentAlert() {
  let alert = this.alertCtrl.create({
    title: 'Low battery',
    subTitle: '10% of battery remaining',
    buttons: ['Dismiss']
  });
  alert.present();
}

presentConfirm() {
  let alert = this.alertCtrl.create({
    title: 'Confirm purchase',
    message: 'Do you want to buy this book?',
    buttons: [
      {
        text: 'Cancel',
        role: 'cancel',
        handler: () => {
          console.log('Cancel clicked');
        }
      },
      {
        text: 'Buy',
        handler: () => {
          console.log('Buy clicked');
        }
      }
    ]
  });
  alert.present();
}

presentPrompt() {
  let alert = this.alertCtrl.create({
    title: 'Login',
    inputs: [
      {
        name: 'username',
        placeholder: 'Username'
      },
      {
        name: 'password',
        placeholder: 'Password',
        type: 'password'
      }
    ],
    buttons: [
      {
        text: 'Cancel',
        role: 'cancel',
        handler: data => {
          console.log('Cancel clicked');
        }
      },
      {
        text: 'Login',
        handler: data => {
          if (User.isValid(data.username, data.password)) {
            // logged in!
          } else {
            // invalid login
            return false;
          }
        }
      }
    ]
  });
  alert.present();
}

徽标提示

Badges 是向用户传达数值的小组件，可以包含数字或文字信息

使用

可以通过创建 Ionic 的自定义元素 ion-badge 创建

Sass 变量

使用示例

1
2
3
4
5
6
7
<ion-item>
  <ion-icon name="logo-twitter" item-start></ion-icon>
  Followers
  <ion-badge item-end>260k</ion-badge>
</ion-item>

<ion-badge color="secondary"></ion-badge>

按钮

Buttons 是用户与应用交互的重要方式，按钮可以由文字和图标组成

使用

可以通过为普通 button 元素添加 Ionic 的自定义样式 ion-badge 使用

button 属性

属性 类型 描述
block boolean 如果为 true 作为块级按钮（宽度等于界面宽度）显示
clear boolean 如果为 true 清除按钮样式（背景和边框）
color string 按钮颜色 Sass 变量（定义在：src/theme/variables.scss 下的 $colors: {} 中）
default boolean 如果为 true 使按钮显示为默认大小
small boolean 如果为 true 使按钮显示为较小大小
large boolean 如果为 true 使按钮显示为较大大小
full boolean 如果为 true 作为全屏按钮（宽度等于界面宽度，并且没有左右边框）显示
mode string 设置按钮显示的平台样式，可以为：”ios”、”md”或”wp”
outline boolean 如果为 true 作为带边框的透明按钮显示
round boolean 如果为 true 作为圆角按钮显示
solid boolean 如果为 true 作为不透明按钮显示，默认属性
strong boolean 如果为 true 按钮文字加粗显示

Sass 变量

使用示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!-- Bind the color and outline inputs to an expression -->
<button ion-button [color]="isDanger ? 'danger' : 'primary'" [outline]="isOutline">
  Danger (Solid)
</button>

<!-- Bind the color and round inputs to an expression -->
<button ion-button [color]="myColor" [round]="isRound">
  Secondary (Round)
</button>

<!-- Bind the color and clear inputs to an expression -->
<button ion-button [color]="isSecondary ? 'secondary' : 'primary'"  [clear]="isClear">
  Primary (Clear)
</button>

<!-- Bind the color, outline and round inputs to an expression -->
<button ion-button [color]="myColor2" [outline]="isOutline" [round]="isRound">
  Dark (Solid + Round)
</button>

<!-- Bind the click event to a method -->
<button ion-button (click)="logEvent($event)">
  Click me!
</button>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
@Component({
  templateUrl: 'main.html'
})
class E2EPage {
  isDanger: boolean = true;
  isSecondary: boolean = false;
  isRound: boolean = true;
  isOutline: boolean = false;
  isClear: boolean = true;
  myColor: string = 'secondary';
  myColor2: string = 'dark';

  logEvent(event) {
	console.log(event)
  }
}

卡片

Cards 是控制和组织信息的好方法

使用

Cards 是一个 CSS 组件，由多个 Ionic 的自定义元素实现。这些可以和其他元素组合或嵌套使用，从而创建更丰富的内容

元素名 描述
ion-card Cards 元素
ion-card-header Cards 头
ion-card-content Cards 内容

使用示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
<!--基本卡片-->
<ion-card>

  <ion-card-header>
	Card Header
  </ion-card-header>

  <ion-card-content>
	<!-- Add card content here! -->
  </ion-card-content>

</ion-card>

<!--卡片头-->
<ion-card>
  <ion-card-header>
	Header
  </ion-card-header>
  <ion-card-content>
	The British use the term "header", but the American term "head-shot" the English simply refuse to adopt.
  </ion-card-content>
</ion-card>

<!--列表卡片-->
<ion-card>
  <ion-card-header>
	Explore Nearby
  </ion-card-header>

  <ion-list>
	<button ion-item>
	  <ion-icon name="cart" item-start></ion-icon>
	  Shopping
	</button>

	<button ion-item>
	  <ion-icon name="medical" item-start></ion-icon>
	  Hospital
	</button>

	<button ion-item>
	  <ion-icon name="cafe" item-start></ion-icon>
	  Cafe
	</button>

	<button ion-item>
	  <ion-icon name="paw" item-start></ion-icon>
	  Dog Park
	</button>

	<button ion-item>
	  <ion-icon name="beer" item-start></ion-icon>
	  Pub
	</button>

	<button ion-item>
	  <ion-icon name="planet" item-start></ion-icon>
	  Space
	</button>

  </ion-list>
</ion-card>

<!--图片卡片-->
<ion-card>
  <img src="img/nin-live.png"/>
  <ion-card-content>
	<ion-card-title>
	  Nine Inch Nails Live
	  </ion-card-title>
	<p>
	  The most popular industrial group ever, and largely
	  responsible for bringing the music to a mass audience.
	</p>
  </ion-card-content>
</ion-card>

<!--背景图卡片-->
<ion-content class="card-background-page">

  <ion-card>
	<img src="img/card-saopaolo.png"/>
	<div class="card-title">São Paulo</div>
	<div class="card-subtitle">41 Listings</div>
  </ion-card>

  <ion-card>
	<img src="img/card-amsterdam.png"/>
	<div class="card-title">Amsterdam</div>
	<div class="card-subtitle">64 Listings</div>
  </ion-card>

  <ion-card>
	<img src="img/card-sf.png"/>
	<div class="card-title">San Francisco</div>
	<div class="card-subtitle">72 Listings</div>
  </ion-card>

  <ion-card>
	<img src="img/card-madison.png"/>
	<div class="card-title">Madison</div>
	<div class="card-subtitle">28 Listings</div>
  </ion-card>

</ion-content>

<!--社交卡片-->
<ion-card>

  <ion-item>
	<ion-avatar item-start>
	  <img src="img/marty-avatar.png">
	</ion-avatar>
	<h2>Marty McFly</h2>
	<p>November 5, 1955</p>
  </ion-item>

  <img src="img/advance-card-bttf.png">

  <ion-card-content>
	<p>Wait a minute. Wait a minute, Doc. Uhhh... Are you telling me that you built a time machine... out of a DeLorean?! Whoa. This is heavy.</p>
  </ion-card-content>

  <ion-row>
	<ion-col>
	  <button ion-button icon-left clear small>
		<ion-icon name="thumbs-up"></ion-icon>
		<div>12 Likes</div>
	  </button>
	</ion-col>
	<ion-col>
	  <button ion-button icon-left clear small>
		<ion-icon name="text"></ion-icon>
		<div>4 Comments</div>
	  </button>
	</ion-col>
	<ion-col center text-center>
	  <ion-note>
		11h ago
	  </ion-note>
	</ion-col>
  </ion-row>

</ion-card>

<!--地图卡片-->
<ion-card>

  <img src="img/advance-card-map-madison.png">
  <ion-fab right top>
	<button ion-fab>
	  <ion-icon name="pin"></ion-icon>
	</button>
  </ion-fab>

  <ion-item>
	<ion-icon name="football" item-start large></ion-icon>
	<h2>Museum of Football</h2>
	<p>11 N. Way St, Madison, WI 53703</p>
  </ion-item>

  <ion-item>
	<ion-icon name="wine" item-left large ></ion-icon>
	<h2>Institute of Fine Cocktails</h2>
	<p>14 S. Hop Avenue, Madison, WI 53703</p>
  </ion-item>

  <ion-item>
	<span item-left>18 min</span>
	<span item-left>(2.6 mi)</span>
	<button ion-button icon-left clear item-end>
	  <ion-icon name="navigate"></ion-icon>
	  Start
	</button>
  </ion-item>

</ion-card>

复选框

Checkbox 是基于模式的简单组件。它可以放置在一个ion-item或用作独立复选框

使用

可以通过创建 Ionic 的自定义元素 ion-checkbox 创建，它可以放置在一个 ion-item 元素下或用作独立复选框

ion-checkbox 属性

属性 类型 描述
checked boolean 如果为 true ion-checkbox 被选中
disabled boolean 如果为 true ion-checkbox 被禁用

Sass 变量

使用示例

1
2
3
4
5
6
7
8
9
<ion-item>
  <ion-label>Daenerys Targaryen</ion-label>
  <ion-checkbox color="dark" checked="true"></ion-checkbox>
</ion-item>

<ion-item>
  <ion-label>Arya Stark</ion-label>
  <ion-checkbox disabled="true" (ionChange)="updateCucumber()"></ion-checkbox>
</ion-item>
1
2
3
4
5
6
7
8
9
10
@Component({
  templateUrl: 'main.html'
})
class SaladPage {
  cucumber: boolean;

  updateCucumber() {
	console.log('Cucumbers new state:' + this.cucumber);
  }
}

日期时间

DateTime 组件用于显示一个界面，方便用户选择日期和时间

使用

可以通过创建 Ionic 的自定义元素 ion-datetime 创建，日期时间的显示格式将由 displayFormat 可选格式的组合指定，包括空格在内的任何字符都可以用作分隔符

ion-datetime 属性

属性 类型 描述
cancelText string 选择器取消按钮上的文字
doneText string 选择器完成按钮上的文字
placeholder string 当没有选择日期时显示的文字
max string 设置日期时间的最大值
min string 设置日期时间的最小值
displayFormat string 设置日期时间的显示格式
pickerFormat string 设置选择器日期时间的显示格式
dayNames arry 所有星期的名称
dayShortNames arry 所有星期的短名称
monthNames arry 所有月份的名称
monthShortNames arry 所有月份的短名称
minuteValues array 或 string 创建可选分钟列表的值
hourValues array 或 string 创建可选小时列表的值
dayValues array 或 string 创建可选日列表的值
monthValues array 或 string 创建可选月份列表的值
yearValues array 或 string 创建可选年列表的值
pickerOptions any 选择器界面可以接受的任何其他选项

displayFormat 可选格式

格式 描述 举例
YYYY 4位数年份 2017
YY 两位数年份 17
M 月份 1…12
MM 月份，包含0 01…12
MMM 月份简称 Jan
MMMM 月份全称 January
D 日 1…31
DD 日，包含0 01…31
DDD 日，简称 Fri
DDDD 日，全称 Friday
H 小时,24计时法 1…24
HH 小时，24计时法，包含0 01…24
h 小时，12计时法 1…12
hh 小时，12计时法，包含0 01…12
a 小时，12计时法，小写 am、pm
A 小时，12时计时法，大写 AM、PM
m 分钟 1…59
mm 分钟，包含0 01..59
s 秒 1…59
ss 秒，包含0 01…59
Z UTC 时区偏移 Z(时区标识符 表示格林威治时间)、+HH:mm、-HH:mm

自定义显示名称

高级日期时间验证和操作

Sass 变量

使用示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
 <ion-list>
<ion-item>
	<ion-input placeholder="Title"></ion-input>
</ion-item>
<ion-item>
	<ion-input placeholder="Location"></ion-input>
</ion-item>
</ion-list>

<ion-list>
<ion-item>
	<ion-label>Start Date</ion-label>
	<ion-datetime displayFormat="MMM DD YYYY" [(ngModel)]="event.month"></ion-datetime>
</ion-item>


<ion-item>
	<ion-label>Start Time</ion-label>
	<ion-datetime displayFormat="h:mm A" pickerFormat="h mm A" [(ngModel)]="event.timeStarts"></ion-datetime>
</ion-item>

<ion-item>
	<ion-label>Ends</ion-label>
	<ion-datetime displayFormat="MMM DD YYYY" [(ngModel)]="event.timeEnds"></ion-datetime>
</ion-item>

<button ion-item>
	<ion-label>Repeat</ion-label>
	<ion-note item-end>Never</ion-note>
</button>

<button ion-item>
	<ion-label>Travel Time</ion-label>
	<ion-note item-end>None</ion-note>
</button>
</ion-list>

<ion-list>
<button ion-item>
	<ion-label>Alert</ion-label>
	<ion-note item-end>None</ion-note>
</button>
 </ion-list>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { Component } from '@angular/core';


@Component({
  templateUrl: 'template.html'
})
export class BasicPage {
  public event = {
	month: '1990-02-19',
	timeStarts: '07:43',
	timeEnds: '1990-02-20'
  }

}

浮动按钮

FABs 的名字表示在固定位置上浮动内容,点击可以显示一组按钮组

使用

可以通过创建 Ionic 的自定义元素 ion-fab 创建，ion-fab 元素必须包含应用了 ion-fab 属性的 button 元素

元素名 描述
ion-fab ion-fab 元素
ion-fab-list ion-fab 按钮组

ion-fab 属性

属性 描述
mini 设置此属性将会使 FABs 显示为较小模式

Sass 变量

使用示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<ion-fab top right edge>
  <button ion-fab color="vibrant" mini><ion-icon name="add"></ion-icon></button>
  <ion-fab-list>
    <button ion-fab><ion-icon name="logo-facebook"></ion-icon></button>
    <button ion-fab><ion-icon name="logo-twitter"></ion-icon></button>
    <button ion-fab><ion-icon name="logo-vimeo"></ion-icon></button>
    <button ion-fab><ion-icon name="logo-googleplus"></ion-icon></button>
  </ion-fab-list>
</ion-fab>

<ion-fab right bottom>
  <button ion-fab color="light"><ion-icon name="arrow-dropleft"></ion-icon></button>
  <ion-fab-list side="left">
    <button ion-fab><ion-icon name="logo-facebook"></ion-icon></button>
    <button ion-fab><ion-icon name="logo-twitter"></ion-icon></button>
    <button ion-fab><ion-icon name="logo-vimeo"></ion-icon></button>
    <button ion-fab><ion-icon name="logo-googleplus"></ion-icon></button>
  </ion-fab-list>
</ion-fab>

<ion-fab left top>
  <button ion-fab color="secondary"><ion-icon name="arrow-dropright"></ion-icon></button>
  <ion-fab-list side="right">
    <button ion-fab><ion-icon name="logo-facebook"></ion-icon></button>
    <button ion-fab><ion-icon name="logo-twitter"></ion-icon></button>
    <button ion-fab><ion-icon name="logo-vimeo"></ion-icon></button>
    <button ion-fab><ion-icon name="logo-googleplus"></ion-icon></button>
  </ion-fab-list>
</ion-fab>

<ion-fab left bottom>
  <button ion-fab color="dark"><ion-icon name="arrow-dropup"></ion-icon></button>
  <ion-fab-list side="top">
    <button ion-fab><ion-icon name="logo-facebook"></ion-icon></button>
    <button ion-fab><ion-icon name="logo-twitter"></ion-icon></button>
    <button ion-fab><ion-icon name="logo-vimeo"></ion-icon></button>
    <button ion-fab><ion-icon name="logo-googleplus"></ion-icon></button>
  </ion-fab-list>
</ion-fab>

<ion-fab center middle>
  <button ion-fab color="danger"><ion-icon name="md-share"></ion-icon></button>
  <ion-fab-list side="top">
    <button ion-fab color="primary"><ion-icon name="logo-vimeo"></ion-icon></button>
  </ion-fab-list>
  <ion-fab-list side="bottom">
    <button ion-fab color="secondary"><ion-icon name="logo-facebook"></ion-icon></button>
  </ion-fab-list>
  <ion-fab-list side="left">
    <button ion-fab color="light"><ion-icon name="logo-googleplus"></ion-icon></button>
  </ion-fab-list>
  <ion-fab-list side="right">
    <button ion-fab color="dark"><ion-icon name="logo-twitter"></ion-icon></button>
  </ion-fab-list>
</ion-fab>

<ion-fab right middle>
  <button ion-fab color="danger"><ion-icon name="add"></ion-icon></button>
</ion-fab>

手势

Gestures 可以向 HTML 绑定 tap（轻击）, press（按压）, pan（平移）, swipe（滑动）, rotate（旋转） 和 pinch（缩放）手势事件

使用示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<ion-card (tap)="tapEvent($event)">
  <ion-item>
    Tapped:  times
  </ion-item>
</ion-card>

<ion-card (press)="pressEvent($event)">
  <ion-item>
    Pressed:  times
  </ion-item>
</ion-card>

<ion-card (pan)="panEvent($event)">
  <ion-item>
    Panned:  times
  </ion-item>
</ion-card>

<ion-card (swipe)="swipeEvent($event)">
  <ion-item>
    Swiped:  times
  </ion-item>
</ion-card>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
import { Component } from '@angular/core';


@Component({
  templateUrl: 'template.html'
})
export class BasicPage {

  public press: number = 0;
  public pan: number = 0;
  public swipe: number = 0;
  public tap: number = 0;
  constructor() {

  }
  pressEvent(e) {
	this.press++
  }
  panEvent(e) {
	this.pan++
  }
  swipeEvent(e) {
	this.swipe++
  }
  tapEvent(e) {
	this.tap++
  }

}

栅格化

Ionic的 Grid 基于 flexbox，Ionic 支持的所有平台都支持栅格化。网格由三个单元组成：grid, rows 和 columns

使用

组成网格的组件可以写成元素（例如）或作为属性添加到任何元素（例如

）

元素名 描述
ion-grid 网格
ion-row 行
ion-col 列

Grid 属性

属性 描述
no-padding 删除网格和列之间的填充
fixed 设置网格最大宽度

默认情况下，网格将占用100％的宽度。要根据屏幕尺寸设置最大宽度，请添加fixed属性。网格的最大宽度在 Sass 的 $grid-max-widths 变量中定义

预设分界点（屏幕大小）

分界点名称 值 描述
xs auto 不要设置网格宽度
sm 540px 网格 min-width：576px
md 720px 网格 min-width：768px
lg 960px 网格 min-width：992px
xl 1140px 网格 min-width：1200px

默认分界点
默认分界点由 Sass 的 $grid-breakpoints 变量定义，可以使用不同的值进行中断，也可以重命名、添加和删除分界点

使用示例

自动布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!--等宽：不为列指定宽度时将平均分布各列-->
<ion-grid>
  <ion-row>
	  <ion-col>
	    1
	  </ion-col>
	  <ion-col>
	    2
	  </ion-col>
  </ion-row>
</ion-grid>
<!--设置一列的宽度：设置一列的宽度之后剩余列将平均分布-->
<ion-grid>
  <ion-row>
    <ion-col>
      1
    </ion-col>
    <ion-col col-6>
      2
    </ion-col>
    <ion-col>
      3
    </ion-col>
  </ion-row>
  </ion-row>
</ion-grid>
<!--可变宽度：使用 col-{breakpoint(预设分界点名称)}-auto 属性，指定在屏幕为指定大小或任何时候（省略预设分界点名称）根据内容自定义宽度-->
<ion-grid>
  <ion-row>
    <ion-col>
      1
    </ion-col>
    <ion-col col-auto>
      可变宽度内容
    </ion-col>
    <ion-col>
      3
    </ion-col>
  </ion-row>
</ion-grid>

响应属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!--自定义分界点：可以通过为所有列添加 col-* 属性设置各列的中断位置-->
<ion-grid>
  <ion-row>
    <ion-col col-4>
      1
    </ion-col>
    <ion-col col-2>
      2
    </ion-col>
    <ion-col col-2>
      3
    </ion-col>
    <ion-col col-4>
      4
    </ion-col>
  </ion-row>
</ion-grid>
<!--从竖直排列到水平排列：使用宽度和预设分界点的组合创建一个在超小屏幕上竖向显示，在小屏幕上水平显示的网格-->
<ion-grid>
  <ion-row>
 <!--col-12列宽为12格 col-sm屏幕为小屏-->
    <ion-col col-12 col-sm>
      1
    </ion-col>
    <ion-col col-12 col-sm>
      2
    </ion-col>
    <ion-col col-12 col-sm>
      3
    </ion-col>
    <ion-col col-12 col-sm>
      4
    </ion-col>
  </ion-row>
</ion-grid>

重新排序

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!--偏移列：可以通过为列添加 offset-* 属性设置列向右移动指定列之后再显示-->
<ion-grid>
  <ion-row>
    <ion-col col-3>
      1
    </ion-col>
    <ion-col col-3 offset-3>
      2
    </ion-col>
  </ion-row>
</ion-grid>
<!--指定分界点下偏移列：还可以通过为 offset-* 属性添加 预设分界点名 设置在指定大小下向右移动指定列之后再显示（offset-预设分界点名-*）-->
<ion-grid>
  <ion-row>
    <ion-col col-md-3>
      1
    </ion-col>
    <ion-col col-md-3>
      2
    </ion-col>
    <ion-col col-md-3 offset-md-3>
      3
    </ion-col>
  </ion-row>
</ion-grid>
<!--向后向前偏移列：可以使用 push-* 和 pull-* 向后向前偏移列，此属性也可以结合 预设分界点名（push-预设分界点名-* 和 pull-预设分界点名-*）-->
<ion-grid>
  <ion-row>
    <ion-col col-9 push-3>
      1
    </ion-col>
    <ion-col col-3 pull-9>
      2
    </ion-col>
  </ion-row>
</ion-grid>

对齐

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!--垂直对齐行中所有列：网格中的列元素默认是顶部对齐的，也可以为行添加属性显示指定行中所有列的对齐方式：align-items-start（顶部对齐）、align-items-center（中间对齐）、align-items-end（底部对齐）-->
<ion-grid>
  <ion-row align-items-start>
    <ion-col>
      1
    </ion-col>
    <ion-col>
      2
    </ion-col>
    <ion-col>
      3
    </ion-col>
    <ion-col>
      4 <br>#<br>#<br>#
    </ion-col>
  </ion-row>

  <ion-row align-items-center>
    <ion-col>
      1
    </ion-col>
    <ion-col>
      2
    </ion-col>
    <ion-col>
      3
    </ion-col>
    <ion-col>
      4 <br>#<br>#<br>#
    </ion-col>
  </ion-row>

  <ion-row align-items-end>
    <ion-col>
      1
    </ion-col>
    <ion-col>
      2
    </ion-col>
    <ion-col>
      3
    </ion-col>
    <ion-col>
      4 <br>#<br>#<br>#
    </ion-col>
  </ion-row>
</ion-grid>
<!--垂直对齐行中某一列：除了为行添加属性显示指定行中所有列的对齐方式，也可以为列单独添加属性对齐某一列：align-self-start（顶部对齐）、align-self-center（中间对齐）、align-self-end（底部对齐）-->
<ion-grid>
  <ion-row>
    <ion-col align-self-start>
      <div>
        1 of 4
      </div>
    </ion-col>
    <ion-col align-self-center>
      <div>
        2 of 4
      </div>
    </ion-col>
    <ion-col align-self-end>
      <div>
        3 of 4
      </div>
    </ion-col>
    <ion-col>
      <div>
        4 of 4 <br>#<br>#<br>#
      </div>
    </ion-col>
  </ion-row>
</ion-grid>
<!--水平对齐行中所有列：网格中的列元素默认是左对齐的，也可以为行添加属性显示指定行中所有列的对齐方式：justify-content-start（左对齐）、justify-content-center（居中对齐）、justify-content-end（右对齐）、justify-content-around（分散对齐）、justify-content-between（两端对齐）-->
<ion-grid>
  <ion-row justify-content-start>
    <ion-col col-3>
      1
    </ion-col>
    <ion-col col-3>
      2
    </ion-col>
  </ion-row>

  <ion-row justify-content-center>
    <ion-col col-3>
      1
    </ion-col>
    <ion-col col-3>
      2
    </ion-col>
  </ion-row>

  <ion-row justify-content-end>
    <ion-col col-3>
      1
    </ion-col>
    <ion-col col-3>
      2
    </ion-col>
  </ion-row>

  <ion-row justify-content-around>
    <ion-col col-3>
      1
    </ion-col>
    <ion-col col-3>
      2
    </ion-col>
  </ion-row>

  <ion-row justify-content-between>
    <ion-col col-3>
      1
    </ion-col>
    <ion-col col-3>
      2
    </ion-col>
  </ion-row>
</ion-grid>

自定义网格

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 /*使用内置的网格 Sass 变量和映射，可以完全自定义预定义的网格属性。更改断点数，媒体查询值，列数等*/
 /*
 列数和填充数
   可以通过 Sass 变量修改网格列数及其填充数
$grid-columns 用于生成每个列的宽度（以百分比表示）
$grid-padding-width 用于网格上的填充
 */
 $grid-columns:               12 !default;
 
 $grid-padding-width:         10px !default;
 
 $grid-padding-widths: (
   xs: $grid-padding-width,
   sm: $grid-padding-width,
   md: $grid-padding-width,
   lg: $grid-padding-width,
   xl: $grid-padding-width
 ) !default;

网格层

1
2
3
4
5
6
7
8
9
10
11
12
/*要定制分界点及其值，请覆盖 $grid-breakpoints 和 $grid-max-width 的值。例如，要使用3个断点，可以写下列内容：*/
$grid-breakpoints: (
  sm: 0,
  md: 768px,
  lg: 1024px
);

$grid-max-widths: (
  sm: 420px,
  md: 720px,
  lg: 960px
);

Sass 变量

图标

Icons

使用

可以通过创建 Ionic 的自定义元素 ion-icon 创建

ion-icon 属性

属性 类型 描述
ios string 指定在 ios 下使用的图标
isActive boolean 如果为true，则图标的样式为“活动”外观。填充了一个活动图标，一个不活动的图标是图标的轮廓。 isActive属性主要用于Tabbar。只影响ios图标
md string 指定在 md 模式下使用的图标
name string 指定要使用的图标，参见图标列表

使用示例

1
2
3
4
5
6
7
8
9
<!-- 根据模式自动使用对应的 "star" 图标 -->
<ion-icon name="star"></ion-icon>

<!-- 设置每个模式使用的图标 -->
<ion-icon ios="ios-home" md="md-home"></ion-icon>

<!-- 总是使用相同的图标，无论什么模式 -->
<ion-icon name="ios-clock"></ion-icon>
<ion-icon name="logo-twitter"></ion-icon>

可变图标

1
<ion-icon [name]="myIcon"></ion-icon>
1
2
3
4
export class MyFirstPage {
  // use the home icon
  myIcon: string = "home";
}

输入

输入对于以安全的方式收集和处理用户输入至关重要。他们应该遵循每个平台的造型和交互指南，以便用户直观地进行交互。 Ionic使用Angular 2的表单库，它可以被认为是两个依赖的部分，控件和控件组。

表单中的每个输入字段都有一个Control，一个绑定到该字段中的值的函数，并执行验证。控制组是控件的集合。控制组处理表单提交，并提供可用于确定整个表单是否有效的高级API。

使用

元素名 描述
ion-input ion-input 仅用于文本输入，例如：text、password、email、number、search、tel 和 url。ion-input 仍然使用 input 的 type 属性。ion-input 不能用于非文本输入，例如：checkbox、radio、toggle、range、select… 除了 blur 和 focus 事件，ion-input 支持所有标准文本输入事件，例如：keyup、keydown、keypress、input…
ion-textarea ion-textare 用来替代 textarea

input 属性

属性 类型 描述
autocomplete string 自动补齐，可选值为：”on” 和 “off”，默认为 “off”
autocorrect string 自动更正，可选值为：”on” 和 “off”，默认为 “off”
clearInput boolean 如果为 true，当有值时 input 中会出现一个图标，单击它将清除输入
clearOnEdit boolean 如果为 true，在输入值后将被隐藏，如果 type 为 password 时默认为 true，其余为 false
max any 最大值
min any 最小值
placeholder string 输入前的提示文本
readonly boolean 如果为 true 将无法修改其值
step any 上下调整时的增量
type string 控件类型，可选值为：”text”、”password”、”email”、”number”、”search”、”tel” 和 “url”

实例成员

ngAfterContentInit()
ngControl

Sass 变量

使用示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<ion-list>
  <ion-item>
    <ion-label color="primary">Inline Label</ion-label>
    <ion-input placeholder="Text Input"></ion-input>
  </ion-item>

  <ion-item>
    <ion-label color="primary" fixed>Fixed Label</ion-label>
    <ion-input type="tel" placeholder="Tel Input"></ion-input>
  </ion-item>

  <ion-item>
    <ion-input type="number" placeholder="Number Input with no label"></ion-input>
  </ion-item>

  <ion-item>
    <ion-label color="primary" stacked>Stacked Label</ion-label>
    <ion-input type="email" placeholder="Email Input"></ion-input>
  </ion-item>

  <ion-item>
    <ion-label color="primary" stacked>Stacked Label</ion-label>
    <ion-input type="password" placeholder="Password Input"></ion-input>
  </ion-item>

  <ion-item>
    <ion-label color="primary" floating>Floating Label</ion-label>
    <ion-input></ion-input>
  </ion-item>

  <ion-item>
    <ion-input placeholder="Clear Input" clearInput></ion-input>
  </ion-item>

  <ion-item>
    <ion-textarea placeholder="Enter a description"></ion-textarea>
  </ion-item>
</ion-list>

列表

list 用于显示信息行，列表可以包含任何元素，亦可被任何元素包含

使用

使用 ion-list 必须导入 List 组件
可以通过创建 Ionic 的自定义元素 ion-list 创建

元素名 描述
ion-list list 元素，用于创建列表
ion-list-header 列表顶部的标题
ion-item 列表项
ion-item-group list group 元素，用于替代 ion-list 使用此元素创建列表组。可以结合 ion-item-divider 元素和 list-item 元素使用
ion-item-divider 用于 ion-item-group 中为列表组设置组标题

ion-list 属性

属性 类型 描述
sliding boolean 如果为 true 启用滑动
no-lines 添加 no-lines 属性将在列表项之间隐藏分隔符
inset 添加 inset 属性将为列表添加外边距

关闭任何打开的滑动项目
closeSlidingItems()
启用滑动项目
enableSlidingItems(false)

Sass 变量

使用示例

基本列表

1
2
3
4
5
6
7
<ion-content>
  <ion-list>
    <button ion-item *ngFor="let item of items" (click)="itemSelected(item)">
      
    </button>
  </ion-list>
</ion-content>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
import { Component } from '@angular/core';


@Component({
  templateUrl: 'template.html'
})
export class BasicPage {
  items = [
	'Pokémon Yellow',
	'Super Metroid',
	'Mega Man X',
	'The Legend of Zelda',
	'Pac-Man',
	'Super Mario World',
	'Street Fighter II',
	'Half Life',
	'Final Fantasy VII',
	'Star Fox',
	'Tetris',
	'Donkey Kong III',
	'GoldenEye 007',
	'Doom',
	'Fallout',
	'GTA',
	'Halo'
  ];

  itemSelected(item: string) {
	console.log("Selected Item", item);
  }
}

没有线

1
2
3
4
5
<ion-list no-lines>
  <button ion-item *ngFor="let item of items" (click)="itemSelected(item)">
    
  </button> 
</ion-list>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
import { Component } from '@angular/core';


@Component({
  templateUrl: 'template.html'
})
export class BasicPage {
  items = [
	'Pokémon Yellow',
	'Super Metroid',
	'Mega Man X',
	'The Legend of Zelda',
	'Pac-Man',
	'Super Mario World',
	'Street Fighter II',
	'Half Life',
	'Final Fantasy VII',
	'Star Fox',
	'Tetris',
	'Donkey Kong III',
	'GoldenEye 007',
	'Doom',
	'Fallout',
	'GTA',
	'Halo'
  ];

  itemSelected(item: string) {
	console.log("Selected Item", item);
  }
}

有外边距的列表

1
2
3
4
5
<ion-list inset>
  <button ion-item *ngFor="let item of items" (click)="itemSelected(item)">
    
  </button> 
</ion-list>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
import { Component } from '@angular/core';


@Component({
  templateUrl: 'template.html'
})
export class BasicPage {
  items = [
	'Pokémon Yellow',
	'Super Metroid',
	'Mega Man X',
	'The Legend of Zelda',
	'Pac-Man',
	'Super Mario World',
	'Street Fighter II',
	'Half Life',
	'Final Fantasy VII',
	'Star Fox',
	'Tetris',
	'Donkey Kong III',
	'GoldenEye 007',
	'Doom',
	'Fallout',
	'GTA',
	'Halo'
  ];

  itemSelected(item: string) {
	console.log("Selected Item", item);
  }
}

列表分割符

1
2
3
4
5
6
7
<ion-content>
  <ion-item-group>
    <ion-item-divider color="light">A</ion-item-divider>
    <ion-item>Angola</ion-item>
    <ion-item>Argentina</ion-item>
  </ion-item-group>
</ion-content>

列表标题

1
2
3
4
5
6
7
8
<ion-list>
  <ion-list-header>
    Action
  </ion-list-header>
  <ion-item>Terminator II</ion-item>
  <ion-item>The Empire Strikes Back</ion-item>
  <ion-item>Blade Runner</ion-item>
</ion-list>

图标列表

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<ion-content>
  <ion-list no-border>

    <ion-list-header>
      Classes
    </ion-list-header>

    <ion-item>
      <ion-icon name='planet' item-start></ion-icon>
      Astronomy
      <ion-note item-end>
      To the moon
      </ion-note>
    </ion-item>

    <ion-item>
      <ion-toggle checked="false"></ion-toggle>
      <ion-label>
        Muggle Studies
      </ion-label>
      <ion-icon name='body' item-start></ion-icon>
    </ion-item>

    <ion-item>
      <ion-icon name='leaf' item-start></ion-icon>
      Herbology
      <ion-icon name='rose' item-end color="secondary"></ion-icon>
    </ion-item>

    <ion-item>
      <ion-icon name='flask' item-start></ion-icon>
      Potions
      <ion-note item-end>
      Poisonous
      </ion-note>
    </ion-item>



  </ion-list>


  <ion-list>

    <ion-list-header>
      Activities
    </ion-list-header>

    <ion-item>
      Incantation
      <ion-icon name='color-wand' item-start></ion-icon>
      <ion-note item-end>Crucio!</ion-note>
    </ion-item>

    <ion-item>
      <ion-toggle checked="true"></ion-toggle>
      <ion-label>
        Quidditch Practice
      </ion-label>
      <ion-icon name='brush' item-start></ion-icon>
    </ion-item>


    <ion-item>
      <ion-icon name='wine' item-start></ion-icon>
      Mead Drinking
      <ion-note item-end>Yes please</ion-note>
    </ion-item>


  </ion-list>

  <ion-list>

    <ion-list-header>
      Friends
    </ion-list-header>

    <ion-item>
      <ion-icon name='flash' item-start></ion-icon>
      Harry
      <ion-note item-end>The boy who lived</ion-note>
    </ion-item>

    <ion-item>
      <ion-icon name='book' item-start></ion-icon>
      Hermoine
      <ion-note item-end>Muggle-born</ion-note>
    </ion-item>

    <ion-item>
      <ion-icon name='beer' item-start></ion-icon>
      Ron
      <ion-note item-end>Brilliant!</ion-note>
    </ion-item>


  </ion-list>


</ion-content>

头像列表

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<ion-content class="list-avatar-page">
  <ion-list>

    <ion-list-header>Today</ion-list-header>

    <ion-item>
      <ion-avatar item-start>
        <img src="assets/img/avatar-ts-woody.png">
      </ion-avatar>
      <h2>Woody</h2>
      <p>This town ain't big enough for the two of us!</p>
      <ion-note item-end>3:43 pm</ion-note>
    </ion-item>

    <ion-item>
      <ion-avatar item-start>
        <img src="assets/img/avatar-ts-buzz.png">
      </ion-avatar>
      <h2>Buzz Lightyear</h2>
      <p>My eyeballs could have been sucked from their sockets!</p>
      <ion-note item-end>1:12 pm</ion-note>
    </ion-item>

    <ion-item>
      <ion-avatar item-start>
        <img src="assets/img/avatar-ts-jessie.png">
      </ion-avatar>
      <h2>Jessie</h2>
      <p>Well aren't you just the sweetest space toy I ever did meet!</p>
      <ion-note item-end>10:03 am</ion-note>
    </ion-item>

    <ion-item>
      <ion-avatar item-start>
        <img src="assets/img/avatar-ts-potatohead.png">
      </ion-avatar>
      <h2>Mr. Potato Head</h2>
      <p>You're not turning me into a Mashed Potato.</p>
      <ion-note item-end>5:47 am</ion-note>
    </ion-item>

  </ion-list>

  <ion-list>

    <ion-list-header>Yesterday</ion-list-header>

    <ion-item>
      <ion-avatar item-start>
        <img src="assets/img/avatar-ts-hamm.png">
      </ion-avatar>
      <h2>Hamm</h2>
      <p>You heard of Kung Fu? Well get ready for pork chop.</p>
      <ion-note item-end>11:11 pm</ion-note>
    </ion-item>

    <ion-item>
      <ion-avatar item-start>
        <img src="assets/img/avatar-ts-slinky.png">
      </ion-avatar>
      <h2>Slinky Dog</h2>
      <p>I may not be a smart dog, but I know what roadkill is.</p>
      <ion-note item-end>8:54 pm</ion-note>
    </ion-item>

    <ion-item>
      <ion-avatar item-start>
        <img src="assets/img/avatar-ts-rex.png">
      </ion-avatar>
      <h2>Rex</h2>
      <p>Were you scared? Tell me honestly.</p>
      <ion-note item-end>7:22 am</ion-note>
    </ion-item>

    <ion-item>
      <ion-avatar item-start>
        <img src="assets/img/avatar-ts-bullseye.png">
      </ion-avatar>
      <h2>Bullseye</h2>
      <p>Neigh!</p>
      <ion-note item-end>2:08 am</ion-note>
    </ion-item>

  </ion-list>

  <ion-list>

    <ion-list-header>Last Week</ion-list-header>

    <ion-item>
      <ion-avatar item-start>
        <img src="assets/img/avatar-ts-barbie.png">
      </ion-avatar>
      <h2>Barbie</h2>
      <p>So, who's ready for Ken's dream tour?</p>
      <ion-note item-end>Sun</ion-note>
    </ion-item>

    <ion-item>
      <ion-avatar item-start>
        <img src="assets/img/avatar-ts-squeeze.png">
      </ion-avatar>
      <h2>Squeeze</h2>
      <p>The claw is our master.</p>
      <ion-note item-end>Fri</ion-note>
    </ion-item>

    <ion-item>
      <ion-avatar item-start>
        <img src="assets/img/avatar-ts-sarge.png">
      </ion-avatar>
      <h2>Sarge</h2>
      <p>Code Red, repeat: We're at Code Red!</p>
      <ion-note item-end>Wed</ion-note>
    </ion-item>

    <ion-item>
      <ion-avatar item-start>
        <img src="assets/img/avatar-ts-bopeep.png">
      </ion-avatar>
      <h2>Bo Peep</h2>
      <p>What would you say if I get someone else to watch the sheep for me tonight?</p>
      <ion-note item-end>Mon</ion-note>
    </ion-item>

  </ion-list>

</ion-content>

滑动列表

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<ion-content>
  <ion-list>
    <ion-list-header>
      Recent Conversations
    </ion-list-header>

    <ion-item>
      <ion-avatar item-start>
        <img src="assets/img/avatar-finn.png">
      </ion-avatar>
      <h2>Finn</h2>
      <h3>I'm a big deal</h3>
      <p>Listen, I've had a pretty messed up day...</p>
    </ion-item>

    <ion-item>
      <ion-avatar item-start>
        <img src="assets/img/avatar-han.png">
      </ion-avatar>
      <h2>Han</h2>
      <h3>Look, kid...</h3>
      <p>I've got enough on my plate as it is, and I...</p>
    </ion-item>

    <ion-item>
      <ion-avatar item-start>
        <img src="assets/img/avatar-rey.png">
      </ion-avatar>
      <h2>Rey</h2>
      <h3>I can handle myself</h3>
      <p>You will remove these restraints and leave...</p>
    </ion-item>

    <ion-item>
      <ion-avatar item-start>
        <img src="assets/img/avatar-luke.png">
      </ion-avatar>
      <h2>Luke</h2>
      <h3>Your thoughts betray you</h3>
      <p>I feel the good in you, the conflict...</p>
    </ion-item>
  </ion-list>

  <ion-list>
    <ion-list-header>
      Online
    </ion-list-header>

    <ion-item>
      <ion-avatar item-start>
        <img src="assets/img/avatar-poe.png">
      </ion-avatar>
      <h2>Poe</h2>
      <h3>New Ride</h3>
      <p>I just upgraded my X-Wing. Next time...</p>
    </ion-item>

    <ion-item>
      <ion-avatar item-start>
        <img src="assets/img/avatar-ben.png">
      </ion-avatar>
      <h2>Ben</h2>
      <h3>Move Along</h3>
      <p>These aren't the droids you're looking for...</p>
    </ion-item>

    <ion-item>
      <ion-avatar item-start>
        <img src="assets/img/avatar-leia.png">
      </ion-avatar>
      <h2>Leia</h2>
      <h3>You're My Only Hope</h3>
      <p>I've placed information vital to the survival...</p>
    </ion-item>

    <ion-item>
      <ion-avatar item-start>
        <img src="assets/img/avatar-yoda.png">
      </ion-avatar>
      <h2>Yoda</h2>
      <h3>Size matters not</h3>
      <p>Do or do not. There is no try...</p>
    </ion-item>
  </ion-list>
</ion-content>

缩略图列表

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<ion-content>
  <ion-list>

    <ion-item>
      <ion-thumbnail item-start>
        <img src="assets/img/thumbnail-totoro.png">
      </ion-thumbnail>
      <h2>My Neighbor Totoro</h2>
      <p>Hayao Miyazaki • 1988</p>
      <button ion-button clear item-end>View</button>
    </ion-item>

    <ion-item>
      <ion-thumbnail item-start>
        <img src="assets/img/thumbnail-rotla.png">
      </ion-thumbnail>
      <h2>Raiders of the Lost Ark</h2>
      <p>Steven Spielberg • 1981</p>
      <button ion-button clear item-end>View</button>
    </ion-item>

    <ion-item>
      <ion-thumbnail item-start>
        <img src="assets/img/thumbnail-ghostbusters.png">
      </ion-thumbnail>
      <h2>Ghostbusters</h2>
      <p>Ivan Reitman • 1984</p>
      <button ion-button clear item-end>View</button>
    </ion-item>

    <ion-item>
      <ion-thumbnail item-start>
        <img src="assets/img/thumbnail-batman.png">
      </ion-thumbnail>
      <h2>Batman</h2>
      <p>Tim Burton • 1988</p>
      <button ion-button clear item-end>View</button>
    </ion-item>

    <ion-item>
      <ion-thumbnail item-start>
        <img src="assets/img/thumbnail-bttf.png">
      </ion-thumbnail>
      <h2>Back to the Future</h2>
      <p>Robert Zemeckis • 1985</p>
      <button ion-button clear item-end>View</button>
    </ion-item>

    <ion-item>
      <ion-thumbnail item-start>
        <img src="assets/img/thumbnail-esb.png">
      </ion-thumbnail>
      <h2>The Empire Strikes Back</h2>
      <p>Irvin Kershner • 1980</p>
      <button ion-button clear item-end>View</button>
    </ion-item>

    <ion-item>
      <ion-thumbnail item-start>
        <img src="assets/img/thumbnail-terminator.png">
      </ion-thumbnail>
      <h2>The Terminator</h2>
      <p>James Cameron • 1984</p>
      <button ion-button clear item-end>View</button>
    </ion-item>

  </ion-list>
</ion-content>

载入中

Loading 组件是一个加载信息时防止用户操作的遮罩层

使用

使用 Loading 必须导入 LoadingController 组件
创建 Loading 需要调用 LoadingController 组件的 create() 方法

Loading 参数

参数 类型 描述
spinner string 加载框类型名称，如果为指定该属性，将根据平台自动适配。设置值为 ‘hide’ 可以隐藏加载框
content string 加载框显示的内容，可以是 HTML
loadingSpinner string 加载框名称。设置值为 ‘hide’ 可以隐藏加载框
showBackdrop boolean 如果为 false 则禁用加载框背景
duration int 显示时长
dismissOnPageChange boolean 如果为 true 在页面切换时将不再显示加载框

要在创建后关闭加载框，请调用 dismiss() 方法
要在加载框关闭后执行操作，可以调用 onDidDismiss() 方法

注意，在组件被关闭后，它将不再可用，必须创建。这可以通过将组件的创建和呈现包装在可重用的功能中来避免

使用示例

1
2
3
<ion-content padding>
  <button ion-button block (click)="presentLoading()">Show Loading</button>
</ion-content>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import { Component } from '@angular/core';

import { LoadingController } from 'ionic-angular';


@Component({
  templateUrl: 'template.html'
})
export class BasicPage {

  constructor(public loadingCtrl: LoadingController) { }

  presentLoading() {
    this.loadingCtrl.create({
      content: 'Please wait...',
      duration: 3000,
      dismissOnPageChange: true
    }).present();
  }

}

菜单

menu 是从侧面切出的导航菜单，一个页面可以有多个菜单，但是同时只能有一个菜单被显示

使用

使用 menu 必须导入 MenuController 组件
可以通过创建 Ionic 的自定义元素 ion-menu 创建
使用 ion-menu 的同时需要创建一个 ion-nav 元素，并将 ion-menu 元素的 content 设置为 ion-nav 元素的 #ID 属性
菜单可以使用MenuToggle() 方法切换到打开或关闭。也可以使用 MenuClose() 方法关闭

使用示例

1
2
3
4
5
6
7
8
9
<ion-menu [content]="mycontent">
  <ion-content>
    <ion-list>
      <p>some menu content, could be list items</p>
    </ion-list>
  </ion-content>
</ion-menu>

<ion-nav #mycontent [root]="rootPage"></ion-nav>

0x0

1