跳到主要内容
版本：v8

操作表组件

scoped

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

内联操作表（推荐）​

直接在模板中编写 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
Console messages will appear here when logged from the example above.

主题定制​

操作表使用作用域封装（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 属性以便屏幕阅读器能够 无障碍访问，但如果这些属性描述不够充分或与应用中操作表的使用方式不符，可以覆盖这些属性。

角色​

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

操作表描述​

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

const actionSheet = await this.actionSheetController.create({
  htmlAttributes: {
    'aria-label': '操作表对话框',
  },
});

操作表按钮描述​

包含文本的按钮会被屏幕阅读器读出。如果按钮仅包含图标，或者需要除现有文本以外的描述，应通过向按钮的 htmlAttributes 属性传递 aria-label 来为按钮分配标签。

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

接口​

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​

DescriptionIf true, the action sheet will animate.
Attributeanimated
Typeboolean
Defaulttrue

backdropDismiss​

DescriptionIf true, the action sheet will be dismissed when the backdrop is clicked.
Attributebackdrop-dismiss
Typeboolean
Defaulttrue

buttons​

DescriptionAn array of buttons for the action sheet.
Attributeundefined
Type(string ｜ ActionSheetButton<any>)[]
Default[]

cssClass​

DescriptionAdditional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.
Attributecss-class
Typestring ｜ string[] ｜ undefined
Defaultundefined

enterAnimation​

DescriptionAnimation to use when the action sheet is presented.
Attributeundefined
Type((baseEl: any, opts?: any) => Animation) ｜ undefined
Defaultundefined
DescriptionTitle for the action sheet.
Attributeheader
Typestring ｜ undefined
Defaultundefined

htmlAttributes​

DescriptionAdditional attributes to pass to the action sheet.
Attributeundefined
Typeundefined ｜ { [key: string]: any; }
Defaultundefined

isOpen​

DescriptionIf 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.
Attributeis-open
Typeboolean
Defaultfalse

keyboardClose​

DescriptionIf true, the keyboard will be automatically dismissed when the overlay is presented.
Attributekeyboard-close
Typeboolean
Defaulttrue

leaveAnimation​

DescriptionAnimation to use when the action sheet is dismissed.
Attributeundefined
Type((baseEl: any, opts?: any) => Animation) ｜ undefined
Defaultundefined

mode​

DescriptionThe mode determines which platform styles to use.

This is a virtual property that is set once during initialization and will not update if you change its value after the initial render.
Attributemode
Type"ios" ｜ "md"
Defaultundefined

subHeader​

DescriptionSubtitle for the action sheet.
Attributesub-header
Typestring ｜ undefined
Defaultundefined

translucent​

DescriptionIf true, the action sheet will be translucent. Only applies when the mode is "ios" and the device supports backdrop-filter.
Attributetranslucent
Typeboolean
Defaultfalse

trigger​

DescriptionAn ID corresponding to the trigger element that causes the action sheet to open when clicked.
Attributetrigger
Typestring ｜ undefined
Defaultundefined

事件​

NameDescriptionBubbles
didDismissEmitted after the action sheet has dismissed. Shorthand for ionActionSheetDidDismiss.true
didPresentEmitted after the action sheet has presented. Shorthand for ionActionSheetWillDismiss.true
ionActionSheetDidDismissEmitted after the action sheet has dismissed.true
ionActionSheetDidPresentEmitted after the action sheet has presented.true
ionActionSheetWillDismissEmitted before the action sheet has dismissed.true
ionActionSheetWillPresentEmitted before the action sheet has presented.true
willDismissEmitted before the action sheet has dismissed. Shorthand for ionActionSheetWillDismiss.true
willPresentEmitted before the action sheet has presented. Shorthand for ionActionSheetWillPresent.true

方法​

dismiss​

DescriptionDismiss 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.
Signaturedismiss(data?: any, role?: string) => Promise<boolean>
Parametersdata: 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​

DescriptionReturns a promise that resolves when the action sheet did dismiss.
SignatureonDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>

onWillDismiss​

DescriptionReturns a promise that resolves when the action sheet will dismiss.
SignatureonWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>

present​

DescriptionPresent the action sheet overlay after it has been created.
Signaturepresent() => Promise<void>

CSS Shadow Parts​

No CSS shadow parts available for this component.

CSS 自定义属性​

NameDescription
--backdrop-opacityOpacity of the backdrop
--backgroundBackground of the action sheet group
--button-backgroundBackground of the action sheet button
--button-background-activatedBackground of the action sheet button when pressed. Note: setting this will interfere with the Material Design ripple.
--button-background-activated-opacityOpacity of the action sheet button background when pressed
--button-background-focusedBackground of the action sheet button when tabbed to
--button-background-focused-opacityOpacity of the action sheet button background when tabbed to
--button-background-hoverBackground of the action sheet button on hover
--button-background-hover-opacityOpacity of the action sheet button background on hover
--button-background-selectedBackground of the selected action sheet button
--button-background-selected-opacityOpacity of the selected action sheet button background
--button-colorColor of the action sheet button
--button-color-activatedColor of the action sheet button when pressed
--button-color-disabledColor of the selected action sheet button when disabled
--button-color-focusedColor of the action sheet button when tabbed to
--button-color-hoverColor of the action sheet button on hover
--button-color-selectedColor of the selected action sheet button
--colorColor of the action sheet text
--heightheight of the action sheet
--max-heightMaximum height of the action sheet
--max-widthMaximum width of the action sheet
--min-heightMinimum height of the action sheet
--min-widthMinimum width of the action sheet
--widthWidth of the action sheet

插槽​

No slots available for this component.

Contents

编辑此页