An Action Sheet is a dialog that displays a set of options. It appears on top of the app's content, and must be manually dismissed by the user before they can resume interaction with the app. Destructive options are made obvious in ios mode. There are multiple ways to dismiss the action sheet, including tapping the backdrop or hitting the escape key on desktop.
A button's role property can either be destructive or cancel. Buttons without a role property will have the default look for the platform. Buttons with the cancel role will always load as the bottom button, no matter where they are in the array. All other buttons will be displayed in the order they have been added to the buttons array. Note: We recommend that destructive buttons are always the first button in the array, making them the top button. Additionally, if the action sheet is dismissed by tapping the backdrop, then it will fire the handler from the button with the cancel role.
A button can also be passed data via the data property on ActionSheetButton. This will populate the data field in the return value of the onDidDismiss method.
Action Sheet uses scoped encapsulation, which means it will automatically scope its CSS by appending each of the styles with an additional class at runtime. Overriding scoped selectors in CSS requires a higher specificity selector.
We recommend passing a custom class to cssClass in the create method and using that to add custom styles to the host and inner elements. This property can also accept multiple classes separated by spaces.
/* 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; }
Action Sheets are given a role of dialog. In order to align with the ARIA spec, either the aria-label or aria-labelledby attribute must be set.
It is strongly recommended that every Action Sheet have the header property defined, as Ionic will automatically set aria-labelledby to point to the header element. However, if you choose not to include a header, an alternative is to use the htmlAttributes property to provide a descriptive aria-label or set a custom aria-labelledby value.