版本：v6

ion-action-sheet

操作列表（Action Sheet）是显示一组选项的对话框。它显示在应用内容的上方，用户必须手动关闭后才能继续与应用交互。在 ios 模式下，破坏性选项会明显标识。有多种方式可以关闭操作列表，包括点击背景遮罩或在桌面上按 Escape 键。

内联操作列表（推荐）

ion-action-sheet 可以直接在模板中编写组件来使用。这减少了你需要连接的事件处理程序数量。

使用 `isOpen`

ion-action-sheet 上的 isOpen 属性允许开发者从应用状态控制操作列表的呈现状态。这意味着当 isOpen 设置为 true 时，操作列表将显示；当 isOpen 设置为 false 时，操作列表将关闭。

isOpen 使用单向数据绑定，这意味着当操作列表关闭时，它不会自动设置为 false。开发者应监听 ionActionSheetDidDismiss 或 didDismiss 事件，并将 isOpen 设置为 false。这样做的原因是防止 ion-action-sheet 的内部实现与应用状态紧密耦合。使用单向数据绑定时，操作列表只需要关心响应式变量提供的布尔值。而使用双向数据绑定时，操作列表需要同时关心布尔值和响应式变量本身的存在性，这可能导致不确定的行为并使应用更难调试。

控制器操作列表

在需要对操作列表的显示和关闭有更多控制的场景下，可以使用 actionSheetController。

按钮

按钮的 role 属性可以是 destructive 或 cancel。没有 role 属性的按钮将使用平台的默认外观。具有 cancel 角色的按钮将始终加载为底部按钮，无论它们在数组中的位置如何。所有其他按钮将按照它们在 buttons 数组中添加的顺序显示。注意：我们建议 destructive 按钮始终是数组中的第一个按钮，使其成为顶部按钮。此外，如果通过点击背景遮罩关闭操作列表，则会触发具有 cancel 角色的按钮的处理程序。

按钮还可以通过 ActionSheetButton 上的 data 属性传递数据。这将填充 onDidDismiss 方法返回值中的 data 字段。

关闭时收集角色信息

当 didDismiss 事件触发时，事件详情的 data 和 role 字段可用于收集关于操作列表如何被关闭的信息。

控制台

控制台消息将在上方示例中调用 console.log 时显示在此处。

主题

操作列表使用 scoped 封装，这意味着它会在运行时通过为每个样式追加额外类来自动限定 CSS 作用域。在 CSS 中覆盖 scoped 选择器需要更高的特异性选择器。

样式

我们建议在 create 方法中向 cssClass 传递自定义类，并使用该类为主机和内部元素添加自定义样式。此属性也可以接受以空格分隔的多个类。

/* 不起作用 - 特异性不够 */
.action-sheet-group {
  background: #e5e5e5;
}

/* 起作用 - 在 cssClass 中传递 "my-custom-class" 以提高特异性 */
.my-custom-class .action-sheet-group {
  background: #e5e5e5;
}

CSS 自定义属性

任何已定义的 CSS 自定义属性都可以用于设置操作列表的样式，而无需定位单个元素。

无障碍访问

屏幕阅读器

操作列表设置了 aria 属性以确保屏幕阅读器的无障碍访问，但如果这些属性描述不够充分或与应用中操作列表的使用方式不一致，可以覆盖它们。

角色

操作列表被赋予 dialog 角色。为了符合 ARIA 规范，必须设置 aria-label 或 aria-labelledby 属性。

操作列表描述

强烈建议每个操作列表都定义 header 属性，因为 Ionic 会自动将 aria-labelledby 指向 header 元素。然而，如果你选择不包含 header，另一种方法是使用 htmlAttributes 属性提供描述性的 aria-label 或设置自定义的 aria-labelledby 值。

Angular
Javascript
React
Vue

const actionSheet = await this.actionSheetController.create({
  htmlAttributes: {
    'aria-label': 'action sheet dialog',
  },
});

const actionSheet = await this.actionSheetController.create({
  htmlAttributes: {
    'aria-label': 'action sheet dialog',
  },
});

useIonActionSheet({
  htmlAttributes: {
    'aria-label': 'action sheet dialog',
  },
});

const actionSheet = await actionSheetController.create({
  htmlAttributes: {
    'aria-label': 'action sheet dialog',
  },
});

操作列表按钮描述

包含文本的按钮将被屏幕阅读器读取。如果按钮只包含图标，或希望提供现有文本之外的其他描述，可以通过在按钮的 htmlAttributes 属性中传递 aria-label 来为按钮分配标签。

Angular
Javascript
React
Vue

const actionSheet = await this.actionSheetController.create({
  header: 'Header',
  buttons: [
    {
      icon: 'close',
      htmlAttributes: {
        'aria-label': 'close',
      },
    },
  ],
});

const actionSheet = await this.actionSheetController.create({
  header: 'Header',
  buttons: [
    {
      icon: 'close',
      htmlAttributes: {
        'aria-label': 'close',
      },
    },
  ],
});

useIonActionSheet({
  header: 'Header',
  buttons: [
    {
      icon: 'close',
      htmlAttributes: {
        'aria-label': 'close',
      },
    },
  ],
});

const actionSheet = await actionSheetController.create({
  header: 'Header',
  buttons: [
    {
      icon: 'close',
      htmlAttributes: {
        'aria-label': 'close',
      },
    },
  ],
});

接口

ActionSheetButton

interface ActionSheetButton<T = any> {
  text?: string;
  role?: 'cancel' | 'destructive' | 'selected' | string;
  icon?: string;
  cssClass?: string | string[];
  id?: string;
  htmlAttributes?: { [key: string]: any };
  handler?: () => boolean | void | Promise<boolean | void>;
  data?: T;
}

ActionSheetOptions

interface ActionSheetOptions {
  header?: string;
  subHeader?: string;
  cssClass?: string | string[];
  buttons: (ActionSheetButton | string)[];
  backdropDismiss?: boolean;
  translucent?: boolean;
  animated?: boolean;
  mode?: Mode;
  keyboardClose?: boolean;
  id?: string;
  htmlAttributes?: { [key: string]: any };

  enterAnimation?: AnimationBuilder;
  leaveAnimation?: AnimationBuilder;
}

属性

animated

说明	If `true`, the action sheet will animate.
属性	`animated`
类型	`boolean`
默认值	`true`

backdropDismiss

说明	If `true`, the action sheet will be dismissed when the backdrop is clicked.
属性	`backdrop-dismiss`
类型	`boolean`
默认值	`true`

buttons

说明	An array of buttons for the action sheet.
属性	`undefined`
类型	`(string ｜ ActionSheetButton<any>)[]`
默认值	`[]`

cssClass

说明	Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.
属性	`css-class`
类型	`string ｜ string[] ｜ undefined`
默认值	`undefined`

enterAnimation

说明	Animation to use when the action sheet is presented.
属性	`undefined`
类型	`((baseEl: any, opts?: any) => Animation) ｜ undefined`
默认值	`undefined`

header

说明	Title for the action sheet.
属性	`header`
类型	`string ｜ undefined`
默认值	`undefined`

htmlAttributes

说明	Additional attributes to pass to the action sheet.
属性	`undefined`
类型	`undefined ｜ { [key: string]: any; }`
默认值	`undefined`

isOpen

说明	If `true`, the action sheet will open. If `false`, the action sheet will close. Use this if you need finer grained control over presentation, otherwise just use the actionSheetController or the `trigger` property. Note: `isOpen` will not automatically be set back to `false` when the action sheet dismisses. You will need to do that in your code.
属性	`is-open`
类型	`boolean`
默认值	`false`

keyboardClose

说明	If `true`, the keyboard will be automatically dismissed when the overlay is presented.
属性	`keyboard-close`
类型	`boolean`
默认值	`true`

leaveAnimation

说明	Animation to use when the action sheet is dismissed.
属性	`undefined`
类型	`((baseEl: any, opts?: any) => Animation) ｜ undefined`
默认值	`undefined`

mode

说明	The mode determines which platform styles to use. 这是一个虚拟属性，在初始化时设置一次，之后更改其值不会更新组件。
属性	`mode`
类型	`"ios" ｜ "md"`
默认值	`undefined`

subHeader

说明	Subtitle for the action sheet.
属性	`sub-header`
类型	`string ｜ undefined`
默认值	`undefined`

translucent

说明	If `true`, the action sheet will be translucent. Only applies when the mode is `"ios"` and the device supports `backdrop-filter`.
属性	`translucent`
类型	`boolean`
默认值	`false`

trigger

说明	An ID corresponding to the trigger element that causes the action sheet to open when clicked.
属性	`trigger`
类型	`string ｜ undefined`
默认值	`undefined`

事件

Name	说明	冒泡
`didDismiss`	Emitted after the action sheet has dismissed. Shorthand for ionActionSheetDidDismiss.	`true`
`didPresent`	Emitted after the action sheet has presented. Shorthand for ionActionSheetWillDismiss.	`true`
`ionActionSheetDidDismiss`	Emitted after the action sheet has dismissed.	`true`
`ionActionSheetDidPresent`	Emitted after the action sheet has presented.	`true`
`ionActionSheetWillDismiss`	Emitted before the action sheet has dismissed.	`true`
`ionActionSheetWillPresent`	Emitted before the action sheet has presented.	`true`
`willDismiss`	Emitted before the action sheet has dismissed. Shorthand for ionActionSheetWillDismiss.	`true`
`willPresent`	Emitted before the action sheet has presented. Shorthand for ionActionSheetWillPresent.	`true`

方法

dismiss

说明	Dismiss the action sheet overlay after it has been presented.
签名	`dismiss(data?: any, role?: string) => Promise<boolean>`
参数	data: Any data to emit in the dismiss events. role: The role of the element that is dismissing the action sheet. This can be useful in a button handler for determining which button was clicked to dismiss the action sheet. Some examples include: ``"cancel"`,` "destructive"`, "selected"`, and `"backdrop"`. This is a no-op if the overlay has not been presented yet. If you want to remove an overlay from the DOM that was never presented, use the remove method.

onDidDismiss

说明	Returns a promise that resolves when the action sheet did dismiss.
签名	`onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>`

onWillDismiss

说明	Returns a promise that resolves when the action sheet will dismiss.
签名	`onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>`

present

说明	Present the action sheet overlay after it has been created.
签名	`present() => Promise<void>`

CSS 阴影部分

该组件没有可用的 CSS 阴影部分。

CSS 自定义属性

Name	说明
`--backdrop-opacity`	Opacity of the backdrop
`--background`	Background of the action sheet group
`--button-background`	Background of the action sheet button
`--button-background-activated`	Background of the action sheet button when pressed. Note: setting this will interfere with the Material Design ripple.
`--button-background-activated-opacity`	Opacity of the action sheet button background when pressed
`--button-background-focused`	Background of the action sheet button when tabbed to
`--button-background-focused-opacity`	Opacity of the action sheet button background when tabbed to
`--button-background-hover`	Background of the action sheet button on hover
`--button-background-hover-opacity`	Opacity of the action sheet button background on hover
`--button-background-selected`	Background of the selected action sheet button
`--button-background-selected-opacity`	Opacity of the selected action sheet button background
`--button-color`	Color of the action sheet button
`--button-color-activated`	Color of the action sheet button when pressed
`--button-color-focused`	Color of the action sheet button when tabbed to
`--button-color-hover`	Color of the action sheet button on hover
`--button-color-selected`	Color of the selected action sheet button
`--color`	Color of the action sheet text
`--height`	height of the action sheet
`--max-height`	Maximum height of the action sheet
`--max-width`	Maximum width of the action sheet
`--min-height`	Minimum height of the action sheet
`--min-width`	Minimum width of the action sheet
`--width`	Width of the action sheet

插槽

该组件没有可用的插槽。

内联操作列表（推荐）​

使用 isOpen​

控制器操作列表​

按钮​

关闭时收集角色信息​

主题​

样式​

CSS 自定义属性​

无障碍访问​

屏幕阅读器​

角色​

操作列表描述​

操作列表按钮描述​

接口​

ActionSheetButton​

ActionSheetOptions​

属性​

animated​

backdropDismiss​

buttons​

cssClass​

enterAnimation​

header​

htmlAttributes​

isOpen​

keyboardClose​

leaveAnimation​

mode​

subHeader​

translucent​

trigger​

事件​

方法​

dismiss​

onDidDismiss​

onWillDismiss​

present​

CSS 阴影部分​

CSS 自定义属性​

插槽​

目录

内联操作列表（推荐）

使用 `isOpen`

控制器操作列表

按钮

关闭时收集角色信息

主题

样式

CSS 自定义属性

无障碍访问

屏幕阅读器

角色

操作列表描述

操作列表按钮描述

接口

ActionSheetButton

ActionSheetOptions

属性

animated

backdropDismiss

buttons

cssClass

enterAnimation

header

htmlAttributes

isOpen

keyboardClose

leaveAnimation

mode

subHeader

translucent

trigger

事件

方法

dismiss

onDidDismiss

onWillDismiss

present

CSS 阴影部分

CSS 自定义属性

插槽