版本：v8

ion-action-sheet

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

内联操作列表（推荐）

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

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

关闭时收集角色信息

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

控制台

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

主题

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

样式

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

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

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

CSS 自定义属性

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

无障碍

屏幕阅读器

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

角色

操作列表的 role 为 dialog。为了符合 ARIA 规范，必须设置 aria-label 或 aria-labelledby 属性。

操作列表描述

强烈建议每个操作列表都定义 header 属性，因为 Ionic 会自动设置 aria-labelledby 指向头部元素。但是，如果您选择不包含 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',
      },
    },
  ],
});

Interfaces

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;
}

Properties

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`

Events

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`

Methods

dismiss

说明	Dismiss the action sheet overlay after it has been presented. 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.
签名	`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"`.

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 Shadow Parts

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

CSS Custom Properties

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-disabled`	Color of the selected action sheet button when disabled
`--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

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-disabled`	Color of the selected action sheet button when disabled
`--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

Slots

该组件没有可用的插槽。

内联操作列表（推荐）​

使用 isOpen​

控制器操作列表​

按钮​

关闭时收集角色信息​

主题​

样式​

CSS 自定义属性​

无障碍​

屏幕阅读器​

角色​

操作列表描述​

操作列表按钮描述​

Interfaces​

ActionSheetButton​

ActionSheetOptions​

Properties​

animated​

backdropDismiss​

buttons​

cssClass​

enterAnimation​

header​

htmlAttributes​

isOpen​

keyboardClose​

leaveAnimation​

mode​

subHeader​

translucent​

trigger​

Events​

Methods​

dismiss​

onDidDismiss​

onWillDismiss​

present​

CSS Shadow Parts​

CSS Custom Properties​

Slots​

目录