版本: v8

ion-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` 按钮始终是数组中的第一个按钮，使其成为最顶部的按钮。此外，如果操作表是通过点击背景关闭的，那么它将触发具有取消角色的按钮的处理程序。

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

在关闭时收集角色信息

当 `didDismiss` 事件触发时，可以使用事件详细信息的 `data` 和 `role` 字段来收集有关如何关闭操作表的信息。

控制台

从上面的示例中记录的控制台消息将显示在这里。

主题

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

样式

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

/* DOES NOT WORK - not specific enough */
.action-sheet-group {
  background: #e5e5e5;
}

/* Works - pass "my-custom-class" in cssClass to increase specificity */
.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` 值。

角度
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',
  },
});

操作表按钮描述

包含文本的按钮将由屏幕阅读器读取。如果按钮仅包含图标，或者需要除现有文本之外的描述，则应通过将 `aria-label` 传递给按钮上的 `htmlAttributes` 属性来为按钮分配标签。

角度
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

描述	如果 `true`，操作表将动画。
属性	`animated`
类型	`布尔值`
默认值	`true`

backdropDismiss

描述	如果 `true`，则点击背景时操作表将被关闭。
属性	`backdrop-dismiss`
类型	`布尔值`
默认值	`true`

buttons

描述	操作表按钮数组。
属性	`未定义`
类型	`(字符串｜ActionSheetButton<任何>)[]`
默认值	`[]`

cssClass

描述	用于自定义 CSS 的附加类。如果提供了多个类，则应使用空格分隔。
属性	`css-class`
类型	`string ｜ string[] ｜ undefined`
默认值	`未定义`

enterAnimation

描述	操作表呈现时使用的动画。
属性	`未定义`
类型	`((baseEl: any, opts?: any) => Animation) ｜ undefined`
默认值	`未定义`

描述	操作表的标题。
属性	`header`
类型	`string ｜ undefined`
默认值	`未定义`

htmlAttributes

描述	传递给操作表的附加属性。
属性	`未定义`
类型	`undefined ｜ { [key: string]: any; }`
默认值	`未定义`

isOpen

描述	如果为 `true`，则操作表将打开。如果为 `false`，则操作表将关闭。如果您需要对呈现进行更细粒度的控制，请使用此属性，否则请使用 actionSheetController 或 `trigger` 属性。注意：当操作表关闭时，`isOpen` 不会自动设置为 `false`。您需要在代码中进行操作。
属性	`is-open`
类型	`布尔值`
默认值	`false`

keyboardClose

描述	如果为 `true`，则在呈现叠加层时，键盘将自动关闭。
属性	`keyboard-close`
类型	`布尔值`
默认值	`true`

leaveAnimation

描述	操作表关闭时使用的动画。
属性	`未定义`
类型	`((baseEl: any, opts?: any) => Animation) ｜ undefined`
默认值	`未定义`

mode

描述	模式决定使用哪个平台样式。
属性	`mode`
类型	`"ios" ｜ "md"`
默认值	`未定义`

subHeader

描述	操作表的副标题。
属性	`sub-header`
类型	`string ｜ undefined`
默认值	`未定义`

translucent

描述	如果为 `true`，则操作表将是半透明的。仅在模式为 `"ios"` 且设备支持 `backdrop-filter` 时适用。
属性	`translucent`
类型	`布尔值`
默认值	`false`

trigger

描述	对应于触发元素的 ID，当单击该元素时，操作表将打开。
属性	`trigger`
类型	`string ｜ undefined`
默认值	`未定义`

Events

名称	描述	冒泡
`didDismiss`	操作表关闭后发出。是 ionActionSheetDidDismiss 的简写。	`true`
`didPresent`	操作表呈现后发出。是 ionActionSheetWillDismiss 的简写。	`true`
`ionActionSheetDidDismiss`	操作表关闭后发出。	`true`
`ionActionSheetDidPresent`	操作表呈现后发出。	`true`
`ionActionSheetWillDismiss`	操作表关闭前发出。	`true`
`ionActionSheetWillPresent`	操作表呈现前发出。	`true`
`willDismiss`	操作表关闭前发出。是 ionActionSheetWillDismiss 的简写。	`true`
`willPresent`	操作表呈现前发出。是 ionActionSheetWillPresent 的简写。	`true`

Methods

dismiss

描述	在操作表叠加层呈现后关闭它。
签名	`dismiss(data?: any, role?: string) => Promise<boolean>`

onDidDismiss

描述	返回一个承诺，该承诺在操作表关闭时解析。
签名	`onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>`

onWillDismiss

描述	返回一个承诺，该承诺在操作表即将关闭时解析。
签名	`onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>`

present

描述	在操作表叠加层创建后呈现它。
签名	`present() => Promise<void>`

CSS Shadow Parts

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

CSS Custom Properties

名称	描述
`--backdrop-opacity`	背景的透明度
`--background`	操作表组的背景
`--button-background`	操作表按钮的背景
`--button-background-activated`	按下操作表按钮时的背景。注意：设置此属性会干扰 Material Design 涟漪效果。
`--button-background-activated-opacity`	按下操作表按钮背景的透明度
`--button-background-focused`	将选项卡设置为操作表按钮时的背景
`--button-background-focused-opacity`	将选项卡设置为操作表按钮背景的透明度
`--button-background-hover`	悬停在操作表按钮上的背景
`--button-background-hover-opacity`	悬停在操作表按钮背景的透明度
`--button-background-selected`	选定操作表按钮的背景
`--button-background-selected-opacity`	选定操作表按钮背景的透明度
`--button-color`	操作表按钮的颜色
`--button-color-activated`	按下操作表按钮时的颜色
`--button-color-disabled`	禁用时选定操作表按钮的颜色
`--button-color-focused`	将选项卡设置为操作表按钮时的颜色
`--button-color-hover`	悬停在操作表按钮上的颜色
`--button-color-selected`	选定操作表按钮的颜色
`--color`	操作表文本的颜色
`--height`	操作表的高度
`--max-height`	操作表的最大高度
`--max-width`	操作表的最大宽度
`--min-height`	操作表的最小高度
`--min-width`	操作表的最小宽度
`--width`	操作表的宽度

名称	描述
`--backdrop-opacity`	背景的透明度
`--background`	操作表组的背景
`--button-background`	操作表按钮的背景
`--button-background-activated`	按下操作表按钮时的背景。注意：设置此属性会干扰 Material Design 涟漪效果。
`--button-background-activated-opacity`	按下操作表按钮背景的透明度
`--button-background-focused`	将选项卡设置为操作表按钮时的背景
`--button-background-focused-opacity`	将选项卡设置为操作表按钮背景的透明度
`--button-background-hover`	悬停在操作表按钮上的背景
`--button-background-hover-opacity`	悬停在操作表按钮背景的透明度
`--button-background-selected`	选定操作表按钮的背景
`--button-background-selected-opacity`	选定操作表按钮背景的透明度
`--button-color`	操作表按钮的颜色
`--button-color-activated`	按下操作表按钮时的颜色
`--button-color-disabled`	禁用时选定操作表按钮的颜色
`--button-color-focused`	将选项卡设置为操作表按钮时的颜色
`--button-color-hover`	悬停在操作表按钮上的颜色
`--button-color-selected`	选定操作表按钮的颜色
`--color`	操作表文本的颜色
`--height`	操作表的高度
`--max-height`	操作表的最大高度
`--max-width`	操作表的最大宽度
`--min-height`	操作表的最小高度
`--min-width`	操作表的最小宽度
`--width`	操作表的宽度

Slots

此组件没有可用的插槽。

内联操作表（推荐）​

使用 `isOpen`​

控制器操作表​

按钮​

在关闭时收集角色信息​

主题​

样式​

CSS 自定义属性​

辅助功能​

屏幕阅读器​

角色​

操作表描述​

操作表按钮描述​

接口​

ActionSheetButton​

ActionSheetOptions​

属性​

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​

内容