1.ActionSheetController
官方文档如下(本人使用有道翻译)
An Action Sheet is a dialog that lets the user choose from a set of options. It appears on top of the app's content, and must be manually dismissed by the user before they can resume interaction with the app. Dangerous (destructive) options are made obvious in ios mode. There are easy ways to cancel out of the action sheet, such as tapping the backdrop or hitting the escape key on desktop.
动作表单是允许用户从一组选项中进行选择的对话框。它出现在应用的内容上方,用户必须手动排除,才能恢复与应用的交互。在ios模式下,危险(destructive)
选项变得比较显眼。有一些简单的方法可以取消动作表单,比如点击背景或者点击桌面的退出键。
An action sheet is created from an array of buttons, with each button including properties for its text, and optionally a handler and role. If a handler returns false then the action sheet will not be dismissed. An action sheet can also optionally have a title, subTitle and an icon.
动作表单是由一组按钮创建的,每个按钮包含文本的属性,还可以选择处理程序和角色。如果处理程序返回false,那么操作表将不会被取消。动作表单也可以有一个标题、副标题和图标。
A button's role property can either be destructive or cancel. Buttons without a role property will have the default look for the platform. Buttons with the cancel role will always load as the bottom button, no matter where they are in the array. All other buttons will be displayed in the order they have been added to the buttons array. Note: We recommend that destructive buttons are always the first button in the array, making them the top button. Additionally, if the action sheet is dismissed by tapping the backdrop, then it will fire the handler from the button with the cancel role.
按钮的角色属性可以是破坏性的,也可以是取消的。没有角色属性的按钮将具有平台的默认外观。具有cancel角色的按钮将始终作为底部按钮加载,无论它们在数组的哪个位置。所有其他按钮将按照添加到按钮数组的顺序显示。注意:我们建议破坏性按钮始终是数组中的第一个按钮,使它们成为顶部按钮。另外,如果动作表单通过点击背景而被删除,那么它将会从按钮中触发取消角色。
You can pass all of the action sheet's options in the first argument of the create method: ActionSheet.create(opts). Otherwise the action sheet's instance has methods to add options, like setTitle() or addButton().
您可以在创建方法:ActionSheet.create(opts)
的第一个参数中传递所有动作表单的选项。否则,操作表的实例具有添加选项的方法,如setTitle()
或addButton()
。
方法属性介绍
创建方法: create(opts)
opts 是 ActionSheetOptions
类型, 参数如下:
Option | 类型 | 描述 |
---|---|---|
title | string | 主标题 |
subTitle | string | 副标题 |
cssClass | string | 自定义样式的附加类,由空格分隔。 |
enableBackdropDismiss | boolean | 动作表单在用户点击背景时是否关闭。 |
buttons | array<any> | 要显示的一组按钮。 |
ActionSheet button options 如下:
Option | 类型 | 描述 |
---|---|---|
text | string | 按钮文本 |
icon | icon | 按钮图标 |
handler | any | 选中后的回调 |
cssClass | string | 自定义样式的附加类,由空格分隔 |
role | string | 按钮应该如何显示、destructive 或cancel 。如果没有提供角色,它将显示没有任何附加样式的按钮。 |
实例如下:
import { ActionSheetController } from 'ionic-angular'
export class MyClass{
constructor(public actionSheetCtrl: ActionSheetController) {}
presentActionSheet() {
const actionSheet = this.actionSheetCtrl.create({
title: '更换头像',
// subTitle: '附标题',
// cssClass: 'headChoice',
// enableBackdropDismiss:false,
buttons: [
{
text: '拍照',
icon: 'logo-instagram',
role: 'destructive',
handler: () => {
console.log('Destructive clicked');
}
},{
text: '从相册选择',
icon: 'ios-images',
handler: () => {
console.log('Archive clicked');
}
},{
text: 'Cancel',
role: 'cancel',
handler: () => {
console.log('Cancel clicked');
}
}
]
});
actionSheet.present();
}
}
Dismissing And Async Navigation
在一个action sheet被关闭之后,应用程序可能还需要根据处理程序的逻辑切换到另一个页面。然而,由于多个转换是在大约同一时间触发的,所以导航控制器很难清晰地将可能被异步启动的多个转换激活。对于action sheet来说,这意味着最好等待action sheet完成它的转换,然后在同一个nav控制器上开始新的转换。
在下面的示例中,单击按钮之后,它的handler将等待异步操作完成,然后使用pop返回上一个页面。潜在的问题是,在操作表完成转换之前,异步操作可能已经完成。在这种情况下,最好确保动作表单首先完成了它的转换,然后开始下一个转换。
let actionSheet = this.actionSheetCtrl.create({
title: 'Hello',
buttons: [{
text: 'Ok',
handler: () => {
// 用户点击了表单按钮
// action sheet 开始dimiss transition
let navTransition = actionSheet.dismiss();
// 开始执行异步方法
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();
这个handler返回false是非常关键的。当按钮被点击时action sheet会自动关闭。因为handler返回false,然后这个action sheet就不会被关掉,之后你就可以完全控制action sheet。