ionic2中实现上拉菜单并且修改默认样式也就是自定义样式。ActionSheets。以更换/上传头像为例.
2017-07-22 19:59
387 查看
学习笔记有参考,有翻译,有自己的感悟
先看实例代码:
步骤:
1.在ts文件中引入组件:
import { ActionSheetController } from 'ionic-angular';
2.在construct构造函数中声明注入:
constructor(public navCtrl:
NavController,public actionSheetCtrl: ActionSheetController) {}
3.编写Action
Sheets组件的方法:
4.注:其中cssClass是关键,是定义的这个弹窗的class名,可以根据这个class名对弹窗进行样式的自定义,这个class名的使用一定要在app文件夹里面的app.scss里面进行修改,不然不起作用。buttons里面的icon是添加ionic自带的图标的
除了注意SCSS必须卸载app.scss里面才有用呢另外自己所需要的样式可以在firebar或者审查元素查看控制当前样式的类名,然后对类样式进行重新定义
app.scss文件代码:
完整html:
完整ts:
效果:
完整知识翻译自官网同时加上自己的理解:
ActionSheet是一个对话框,让用户选择一个选项。而且用户必须要选择其中一个选项才能恢复与应用程序的交互(点击背景会执行
ActionSheet会从一个
如果有一个button的
注意:如果有两个
您可以在create方法的第一个参数中传递所有操作工作表的选项:ActionSheet.create(opts)。 否则,操作表的实例有添加选项的方法,如setTitle()或addButton()。
用法:
import { ActionSheetController }from'ionic-angular'
export classMyClass{
constructor(publicactionSheetCtrl: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();
}
}
实例成员:
create(opts)
let
actionSheet =this.actionSheetCtrl.create({
title:
'更换头像',
cssClass:'head',
buttons: [
{
cssClass:'pai',
text:
'拍照',
role:
'destructive',
handler: ()
=> {
console.log('Destructive clicked');
}
}
]
}
create(opts)
按钮的属性
取消和异步导航
在一个动作表被关闭后,应用程序可能还需要根据处理程序的逻辑转换到另一个页面。然而,由于在大致相同的时间触发了多个转换,导航控制器很难对多个可能被异步启动的转换进行动画生成动画。这在Nav Transition Promises部分进一步描述。对于动作单,这意味着在同一导航控制器开始新的转换之前,最好等待动作单完成转换。
在下面的示例中,在按钮被单击之后,其处理程序等待异步操作完成,然后使用pop来浏览同一堆栈中的页面。潜在的问题是异步操作可能已经在操作表甚至完成转换之前完成。在这种情况下,最好确保操作表首先完成过渡,然后开始下一个转换。
let actionSheet =this.actionSheetCtrl.create({
title: 'Hello',
buttons: [{
text: 'Ok',
handler: () => {
// user has clicked the action sheet button用户已经点击动作表按钮
// begin the action sheet's dimiss transition开始actionsheet解除转换
let navTransition =actionSheet.dismiss();
// start some async method启动一些异步方法
someAsyncOperation().then(()=> {
// once the async operation has completed一旦异步操作完成
// then run the next nav transition after the然后运行下一个导航过渡
// first transition has finished animating out第一次转换已经完成动画
navTransition.then(()=> {
this.nav.pop();
});
});
return false;
}
}]
});
actionSheet.present();
请注意,处理程序返回false。 按钮处理程序的一个功能是当他们点击按钮时自动关闭操作工作表,但是我们需要更多的关于转换的控制。 因为处理程序返回false,所以操作表不会自动关闭。 相反,您现在可以完全控制操作表完成转换的时间,以及在开始新的转换之前等待操作表完成转换的功能。
先看实例代码:
步骤:
1.在ts文件中引入组件:
import { ActionSheetController } from 'ionic-angular';
2.在construct构造函数中声明注入:
constructor(public navCtrl:
NavController,public actionSheetCtrl: ActionSheetController) {}
3.编写Action
Sheets组件的方法:
actionsheet() { let actionSheet =this.actionSheetCtrl.create({ title: '更换头像', cssClass:'head', buttons: [ { cssClass:'pai', text: '拍照', icon: 'ios-arrow-forward', role: 'destructive', handler: () => { console.log('Destructive clicked'); } },{ text: '从相册选择', icon: 'ios-arrow-forward', handler: () => { console.log('Archive clicked'); } },{ text: '取消', role: 'cancel', handler: () => { console.log('Cancel clicked'); }} ] }); actionSheet.present(); }
4.注:其中cssClass是关键,是定义的这个弹窗的class名,可以根据这个class名对弹窗进行样式的自定义,这个class名的使用一定要在app文件夹里面的app.scss里面进行修改,不然不起作用。buttons里面的icon是添加ionic自带的图标的
除了注意SCSS必须卸载app.scss里面才有用呢另外自己所需要的样式可以在firebar或者审查元素查看控制当前样式的类名,然后对类样式进行重新定义
app.scss文件代码:
.head{ .action-sheet-group{ .action-sheet-title{ padding: 1rem; font-size: 20px; color: #000; background-color:pink; } .disable-hover{ min-height: auto; font-size: 18px; color: #000; background: #fff; position: relative; .button-inner{ position: relative; .action-sheet-icon{ position: absolute; right: 4px; } } } .action-sheet-cancel{ background: #fefef9; .button-inner{ justify-content:center; font-weight: normal; } } } }
完整html:
<h2 (click)="actionsheet()">actionsheet</h2>
完整ts:
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { IonicPage, ActionSheetController } from 'ionic-angular';
@IonicPage()
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
public simpleColumns: any[];//先定义一个任意类型的数组来接收参数
constructor(public navCtrl: NavController,public actionSheetCtrl:ActionSheetController) {
this.simpleColumns = [
{
name: 'col1',//列名,一个对象表示一列多选,一个multipicker有几列选项就有几个对象
options: [ //每一列的选项集
{ text: '选项1', value: '选项1' },
{ text: '选项2', value: '选项2' },
{ text: '选项3', value: '选项3' }
]
},{
name: 'col2',
options: [
{ text: '1-1', value: '1-1' },
{ text: '1-2', value: '1-2' },
{ text: '2-1', value: '2-1' },
{ text: '2-2', value: '2-2' },
{ text: '3-1', value: '3-1' }
]
},{
name: 'col3',
options: [
{ text: '1-1-1', value: '1-1-1' },
{ text: '1-1-2', value: '1-1-2' },
{ text: '1-2-1', value: '1-2-1' },
{ text: '1-2-2', value: '1-2-2' },
{ text: '2-1-1', value: '2-1-1' },
{ text: '2-1-2', value: '2-1-2' },
{ text: '2-2-1', value: '2-2-1' },
{ text: '2-2-2', value: '2-2-2' },
{ text: '3-1-1', value: '3-1-1' },
{ text: '3-1-2', value: '3-1-2' }
]
}
];
}
actionsheet() { let actionSheet =this.actionSheetCtrl.create({ title: '更换头像', cssClass:'head', buttons: [ { cssClass:'pai', text: '拍照', icon: 'ios-arrow-forward', role: 'destructive', handler: () => { console.log('Destructive clicked'); } },{ text: '从相册选择', icon: 'ios-arrow-forward', handler: () => { console.log('Archive clicked'); } },{ text: '取消', role: 'cancel', handler: () => { console.log('Cancel clicked'); }} ] }); actionSheet.present(); }
}
效果:
完整知识翻译自官网同时加上自己的理解:
ActionSheet是一个对话框,让用户选择一个选项。而且用户必须要选择其中一个选项才能恢复与应用程序的交互(点击背景会执行
cancel的事件)。当然也可以利用背景或者后退键来取消对话框从而恢复和程序的交互。
ActionSheet会从一个
button数组创建它的按钮选项。每一个按钮都拥有一些属性,例如
text
handler
role等等。如果
handler返回
false时,ActionSheet将不会消失。ActionSheet还可以选择有一个标题和副标题。
如果有一个button的
role被设置为
cancel那么这个按钮不管位于按钮数组的哪个位置它都会位于底部。ionic官方建议
destructive类型的按钮最好位于数组的第一个位置。另外,如果ActionSheet是由于点击背景而被取消的,那么它将会执行和
cancle类型的按钮点击一样的事件。
注意:如果有两个
cancle类型的按钮,那么最后一个
cancel类型的按钮会覆盖掉前面所有的
cancel类型的按钮。
您可以在create方法的第一个参数中传递所有操作工作表的选项:ActionSheet.create(opts)。 否则,操作表的实例有添加选项的方法,如setTitle()或addButton()。
用法:
import { ActionSheetController }from'ionic-angular'
export classMyClass{
constructor(publicactionSheetCtrl: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();
}
}
实例成员:
create(opts)
let
actionSheet =this.actionSheetCtrl.create({
title:
'更换头像',
cssClass:'head',
buttons: [
{
cssClass:'pai',
text:
'拍照',
role:
'destructive',
handler: ()
=> {
console.log('Destructive clicked');
}
}
]
}
静态方法
属性名称 | 类型 | 描述 |
---|---|---|
title | string | ActionSheet的标题 |
subTitle | string | ActionSheet的副标题 |
cssClass | string | 自定义样式的css类 |
enableBackdropDismiss | boolean | 用户点击背景是否关闭ActionSheet |
buttons | array<any> | 显示的按钮的数组 |
属性名称 | 类型 | 描述 |
---|---|---|
text | string | 按钮上显示的文字 |
icon | icon | 按钮上显示的图标 |
handler | any | 点击后执行的函数 |
cssClass | stirng | |
role | string | 如何显示按钮, destructive或者 cancel。如果没有设置此选项,那么将显示默认的按钮。 |
实例方法
setTitle(title)
属性名称 | 类型 | 描述 |
---|---|---|
title | string | 设置ActionSheet的标题 |
setSubTitle(subTitle)
属性名称 | 类型 | 描述 |
---|---|---|
subTitle | string | 设置ActionSheet的子标题 |
addButton(button)
属性名称 | 类型 | 描述 |
---|---|---|
button | object | ActionSheet的按钮。 |
在一个动作表被关闭后,应用程序可能还需要根据处理程序的逻辑转换到另一个页面。然而,由于在大致相同的时间触发了多个转换,导航控制器很难对多个可能被异步启动的转换进行动画生成动画。这在Nav Transition Promises部分进一步描述。对于动作单,这意味着在同一导航控制器开始新的转换之前,最好等待动作单完成转换。
在下面的示例中,在按钮被单击之后,其处理程序等待异步操作完成,然后使用pop来浏览同一堆栈中的页面。潜在的问题是异步操作可能已经在操作表甚至完成转换之前完成。在这种情况下,最好确保操作表首先完成过渡,然后开始下一个转换。
let actionSheet =this.actionSheetCtrl.create({
title: 'Hello',
buttons: [{
text: 'Ok',
handler: () => {
// user has clicked the action sheet button用户已经点击动作表按钮
// begin the action sheet's dimiss transition开始actionsheet解除转换
let navTransition =actionSheet.dismiss();
// start some async method启动一些异步方法
someAsyncOperation().then(()=> {
// once the async operation has completed一旦异步操作完成
// then run the next nav transition after the然后运行下一个导航过渡
// first transition has finished animating out第一次转换已经完成动画
navTransition.then(()=> {
this.nav.pop();
});
});
return false;
}
}]
});
actionSheet.present();
请注意,处理程序返回false。 按钮处理程序的一个功能是当他们点击按钮时自动关闭操作工作表,但是我们需要更多的关于转换的控制。 因为处理程序返回false,所以操作表不会自动关闭。 相反,您现在可以完全控制操作表完成转换的时间,以及在开始新的转换之前等待操作表完成转换的功能。
相关文章推荐
- MVC3.0下实现FLASH异步上传并且实现上传照片,截取头像.
- 自定义样式实现菜单和工具栏的分割线
- android实现下拉框(spinner),自定义大小颜色背景位置,去掉默认样式黑边
- Android之修改用户头像并上传服务器(实现手机拍照和SD卡选择上传)
- C# 自定义样式实现菜单和工具栏的分割线
- input type="file"在各个浏览器下的默认样式,以及修改自定义样式
- 修改input file文件上传的默认样式 兼容ie8
- ionic3之自定义返回菜单的样式-yellowcong
- 修改上传文件控件样式并实现上传文件功能
- 修改默认上传文件样式
- js屏蔽鼠标右键默认事件以实现自定义菜单
- 转--创建选项卡实现弹出菜单,以及自定义菜单样式。
- 修改 文件上传 默认样式
- 自定义RadioButton样式,实现菜单
- WordPress自带菜单功能实现多级菜单及自定义样式
- 修改file按钮的默认样式实现代码
- ionic之ion-slide-box实现图片轮播样式修改
- 二进制数据流方式实现 个人头像的读取、上传、修改------善良公社项目
- 修改文件上传默认样式
- ionic开发之用户头像修改-图片选择与上传