移动端

By 丁稳 at: 2017-03-15

ionic自带的图标

一、button

==ionic自带的颜色：==

  • primary 默认，蓝色
  • secondary 绿色
  • danger 红色
  • light 浅灰色
  • dark 黑色

==ionic中怎么自定义颜色属性？ #144f1b==
theme–>variables.scss –> 添加颜色设置

==按钮如果要符合移动端的展示效果:==

1
<button ion-button></button>

==指定颜色:== color="primary/secondary/danger/light/dark"

==按钮样式：==

  • round 圆角
  • outline 边框
  • clear 只有内容
  • small 小一点
  • large 大一点

==带有图标的按钮:==

1
2
3
<button ion-button icon-left/right/only>
		<ion-icon name=""></ion-icon>
</button>

二、卡片 card

1
2
3
4
5
<ion-card>
	<ion-card-header></ion-card-header>
	<ion-card-content></ion-card-content>
</ion-card>

三、list

==基本用法:默认情况每个列表项之间是有横线隔开的，可以指定no-lines去取消横线==

1
2
3
<ion-list>
	<ion-item>test01</ion-item>
</ion-list>

==分组：==

1
2
3
4
5
6
7
8
9
<ion-item-group>
	<ion-item-divider>A</ion-item-divder>
	<ion-item>apple</ion-item>
	<ion-item>and</ion-item>
	<ion-item-divider>B</ion-item-divder>
	<ion-item>apple</ion-item>
	<ion-item>and</ion-item>
</ion-item-group>

==在列表中通过指定item-start/item-end来调整元素显示在列表项的左边或者右边==

icon-list:一个有图标构成的列表

1
2
3
4
5
6
<ion-list>
	<ion-item>
		<ion-icon name="heart" item-start></ion-icon>
		test
	</ion-item>
</ion-list>

avatar-list:一个有头像构成的列表

1
2
3
4
5
6
7
8
9
<ion-list>
	<ion-item>
		<ion-avatar item-start>
			<img src=""/>
		</ion-avatar>
		h2
		p
	</ion-item>
</ion-list>

thumbnail-list:一个有缩略图构成的列表

1
2
3
4
5
6
7
8
9
<ion-list>
	<ion-item>
		<ion-thumbnail item-start>
			<img src=""/>
		</ion-thumbnail>
		h2
		p
	</ion-item>
</ion-list>

sliding-list:支持侧滑的列表

1
2
3
4
5
6
7
8
<ion-list>
		<ion-item-sliding>
			<ion-item>test<ion-item>
			<ion-item-options>
				<button ion-button>btn1</button>
			</ion-item-options>
		</ion-item-sliding>
	</ion-list>

四、ActionSheet

步骤1：

1
import {ActionSheetController} from 'ionic-angular'

步骤2：实例化

1
constructor(public myAS:ActionSheetController){}

步骤3：创建

1
2
3
4
5
6
7
8
9
10
11
let myMenu = this.myAS.create({
	title:"",
	buttons:[
		{
			text:'',
			handler:()=>{},
			role:'cancel/destructive'
		}
		]
	}
)

步骤4：显示

1
myMenu.present();

五、fab 悬浮式操作按钮（主要是用在android设备）

1
2
3
4
5
6
7
8
<ion-fab top/bottom/left/right/center>
	<button ion-fab>share</button>
	<ion-fab-list side="left/right/top/bottom">
		<button ion-fab>
			<ion-icon></ion-icon>
		</button>
	</ion-fab-list>
</ion-fab>

六、loading

主要是在进行数据操作、网络请求比较耗时的场景下面，通过LoadingController来实现一个正在加载的窗口

使用步骤：

1
2
3
4
5
6
7
8
9
10
11
import {LoadingController} from 'ionic-angular';
constructor(public loadCtrl:LoadingController){}
let myLoading = this.loadCtrl.create({
	content:'',
	duration:2000
})
myLoading.present();
myLoading.dismiss();

==实现一个服务，sendRequest是用来处理网络请求；
调用该方法，就提示正在加载，服务器端返回数据，取消该加载中的窗口==

七、toast

ToastController

实例化

1
2
3
4
5
6
7
create({
 message:'',
 duration:1000,
 position
})
present()