# ion-action-sheet 操作表是一个显示一组选项的对话框。它出现在应用内容的顶部，必须由用户手动解除才能恢复与应用的互动。破坏性选项在`ios`模式中变得明显。有多种方法可以关闭操作表，包括点击背景幕或点击桌面上的转义键。 ### 创建 [Action Sheet Controller可以](https://ionicframework.com/action-sheet-controller/ActionSheetController)从一个数组中创建一个[操作表](https://ionicframework.com/action-sheet-controller/ActionSheetController)`buttons`，每个按钮包含其属性`text`，以及可选的a`handler`和`role`。如果处理程序返回，`false`则不会解除操作表。一个动作片也可任选地具有一个`title`，`subTitle`和一个`icon`。 ### 按钮 Buttons 按钮的`role`属性可以是`destructive`或`cancel`。没有角色属性的按钮将具有平台的默认外观。具有该`cancel`角色的按钮将始终作为底部按钮加载，无论它们在阵列中的何处。所有其他按钮将按照添加到`buttons`阵列的顺序显示。注意：我们建议`destructive`按钮始终是数组中的第一个按钮，使它们成为顶部按钮。此外，如果通过点击背景消除操作表，则它将从具有取消角色的按钮触发处理程序。 ## 用法 Angular ~~~ import { Component } from '@angular/core'; import { ActionSheetController } from '@ionic/angular'; @Component({ selector: 'action-sheet-example', templateUrl: 'action-sheet-example.html', styleUrls: ['./action-sheet-example.css'], }) export class ActionSheetExample { constructor(public actionSheetController: ActionSheetController) {} async presentActionSheet() { const actionSheet = await this.actionSheetController.create({ header: 'Albums', buttons: [{ text: 'Delete', role: 'destructive', icon: 'trash', handler: () => { console.log('Delete clicked'); } }, { text: 'Share', icon: 'share', handler: () => { console.log('Share clicked'); } }, { text: 'Play (open modal)', icon: 'arrow-dropright-circle', handler: () => { console.log('Play clicked'); } }, { text: 'Favorite', icon: 'heart', handler: () => { console.log('Favorite clicked'); } }, { text: 'Cancel', icon: 'close', role: 'cancel', handler: () => { console.log('Cancel clicked'); } }] }); await actionSheet.present(); } } ~~~ JavaScript ~~~ async function presentActionSheet() { const actionSheetController = document.querySelector('ion-action-sheet-controller'); await actionSheetController.componentOnReady(); const actionSheet = await actionSheetController.create({ header: "Albums", buttons: [{ text: 'Delete', role: 'destructive', icon: 'trash', handler: () => { console.log('Delete clicked'); } }, { text: 'Share', icon: 'share', handler: () => { console.log('Share clicked'); } }, { text: 'Play (open modal)', icon: 'arrow-dropright-circle', handler: () => { console.log('Play clicked'); } }, { text: 'Favorite', icon: 'heart', handler: () => { console.log('Favorite clicked'); } }, { text: 'Cancel', icon: 'close', role: 'cancel', handler: () => { console.log('Cancel clicked'); } }] }); await actionSheet.present(); } ~~~ ## 属性 ### animated 描述：如果`true`，操作表将动画。 属性：`animated` 类型：`boolean` ### backdropDismiss 描述：如果`true`，单击背景时将取消操作表。 属性：`backdrop-dismiss` 类型：`boolean` ### buttons 描述：操作表的一系列按钮。 类型：`(string | ActionSheetButton)[]` ### cssClass 描述：要申请自定义CSS的其他类。如果提供了多个类，则应使用空格分隔。 属性：`css-class` 类型：`string | string[] | undefined` ### enterAnimation 描述：呈现操作表时要使用的动画。 类型：`((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) | undefined` ### header 描述：行动表的标题。 属性：`header` 类型：`string | undefined` ### keyboardClose 描述：如果`true`，在显示叠加层时键盘将自动关闭。 属性：`keyboard-close` 类型：`boolean` ### leaveAnimation 描述：解除操作表时要使用的动画。 类型：`((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) | undefined` ### mode 描述：该模式确定要使用的平台样式。 属性：`mode` 类型：`"ios" | "md"` ### subHeader 描述：行动表的副标题。 属性：`sub-header` 类型：`string | undefined` ### translucent 描述：如果`true`，操作表将是半透明的。仅在模式`"ios"`和设备支持背景滤镜时适用。 属性：`translucent` 类型：`boolean` ## 事件 | 名称 | 描述 | | --- | --- | | `ionActionSheetDidDismiss` | 警报解除后发出。 | | `ionActionSheetDidPresent` | 警报出现后发出。 | | `ionActionSheetWillDismiss` | 在警报被驳回之前发出。 | | `ionActionSheetWillPresent` | 在警报出现之前发出。 | ## 方法 ### dismiss 描述：在呈现后删除操作表覆盖。 签名：`dismiss(data?: any, role?: string | undefined) => Promise<boolean>` ### onDidDismiss 描述：返回在操作表解除时解析的promise 签名：`onDidDismiss() => Promise<OverlayEventDetail<any>>` ### onWillDismiss 描述：返回在操作表解除时解析的promise 签名：`onWillDismiss() => Promise<OverlayEventDetail<any>>` ### present 描述：创建后显示操作表覆盖 签名：`present() => Promise<void>` ## CSS自定义属性 | 名称 | 描述 | | --- | --- | | `--background` | 行动表组的背景 | | `--background-activated` | 激活的操作表按钮的背景 | | `--background-selected` | 所选操作表按钮的背景 | | `--color` | 操作表文本的颜色 | | `--height` | 行动表的高度 | | `--max-height` | 动作表的最大高度 | | `--max-width` | 操作表的最大宽度 | | `--min-height` | 操作表的最小高度 | | `--min-width` | 操作表的最小宽度 | | `--width` | 操作表的宽度 |