ActionSheet

优质
小牛编辑
123浏览
2023-12-01

ActionSheet是一个对话框,让用户选择一个选项。而且用户必须要选择其中一个选项才能恢复与应用程序的交互(点击背景会执行cancel的事件)。当然也可以利用背景或者后退键来取消对话框从而恢复和程序的交互。

ActionSheet会从一个button数组创建它的按钮选项。每一个按钮都拥有一些属性,例如text handler role 等等。如果handler返回false时,ActionSheet将不会消失。ActionSheet还可以选择有一个标题和副标题。

如果有一个button的role被设置为cancel那么这个按钮不管位于按钮数组的哪个位置它都会位于底部。ionic官方建议destructive类型的按钮最好位于数组的第一个位置。另外,如果ActionSheet是由于点击背景而被取消的,那么它将会执行和cancle类型的按钮点击一样的事件。

注意:如果有两个cancle类型的按钮,那么最后一个cancel类型的按钮会覆盖掉前面所有的cancel类型的按钮。

在创建ActionSheet的第一个参数中,你可以将所有的选项传递进去:`ActionSheet.create(opts)。

  1. openMenu(){
  2. this.actionSheet = ActionSheet.create({
  3. title: 'Albums',
  4. buttons: [
  5. {
  6. text: 'Destructive',
  7. role: 'destructive',
  8. handler: () => {
  9. console.log('Destructive clicked');
  10. }
  11. },
  12. {
  13. text: 'Archive',
  14. handler: () => {
  15. console.log('Archive clicked');
  16. }
  17. },
  18. {
  19. text: 'Cancel',
  20. role: 'cancel',
  21. handler: () => {
  22. console.log('Cancel clicked');
  23. }
  24. }
  25. ]
  26. })
  27. this.nav.present(this.actionSheet);
  28. }

静态方法

create(opts)

属性名称类型描述
titlestringActionSheet的标题
subTitlestringActionSheet的副标题
cssClassstring自定义样式的css类
enableBackdropDismissboolean用户点击背景是否关闭ActionSheet
buttonsarray<any>显示的按钮的数组

按钮的属性

属性名称类型描述
textstring按钮上显示的文字
iconicon按钮上显示的图标
handlerany点击后执行的函数
cssClassstirng
rolestring如何显示按钮,destructive或者cancel。如果没有设置此选项,那么将显示默认的按钮。

实例方法

setTitle(title)

属性名称类型描述
titlestring设置ActionSheet的标题

setSubTitle(subTitle)

属性名称类型描述
subTitlestring设置ActionSheet的子标题

addButton(button)

属性名称类型描述
buttonobjectActionSheet的按钮。