Action/bottom sheet that is displayed on top of current screen.
This element can either be attached directly to the <body> or dynamically created from a template using the ons.createElement(template, { append: true }) utility function and the <template> tag.
The action sheet is useful for displaying a list of options and asking the user to make a decision. A ons-action-sheet-button is provided for this purpose, although it can contain any type of content.
It will automatically be displayed as Material Design (bottom sheet) when running on an Android device.
There are two components used to show dialogs: Dialog and AlertDialog. The Dialog component is a general dialog where you can put any content while the AlertDialog has some default styles that make it easy to show errors, warnings or questions to the user.
To show or hide the dialog the isOpen prop is used.
<Dialog isOpen={this.state.dialogShown}>
Hi!
<Button onClick={this.hideDialog.bind(this)}>
Close
</Button>
</Dialog>
The ons.notification object contains some useful methods to easily show alerts, confirmation dialogs and prompts:
ons.notification.alert(message, options)ons.notificaiton.confirm(message, options)ons.notification.prompt(message, options)They all return a Promise object that can be used to handle the input from the user.
ons.notification.confirm('Are you ready?')
.then((response) => {
// Handle response.
});
| Name | Type | Description |
|---|---|---|
| title | String | Optional title of the action sheet. A new element will be created containing this string. Optional. |
| modifier | String | The appearance of the action sheet. Optional. |
| cancelable | If this attribute is set the action sheet can be closed by tapping the background or by pressing the back button on Android devices. Optional. | |
| disabled | If this attribute is set the action sheet is disabled. Optional. | |
| animation |
String
default |
The animation used when showing and hiding the action sheet. Can be either "none" or "default".
Optional.
|
| animation-options | Expression |
Specify the animation’s duration, timing and delay with an object literal. E.g. {duration: 0.2, delay: 1, timing: 'ease-in'}.
Optional.
|
| mask-color |
String
rgba(0, 0, 0, 0.2) |
Color of the background mask. Default is "rgba(0, 0, 0, 0.2)".
Optional.
|
| visible | Boolean | Whether the action sheet is visible or not. Optional. |
| Name | Description |
|---|---|
| title | Optional title of the action sheet. A new element will be created containing this string. |
| animationOptions |
Specify the animation’s duration, timing and delay with an object literal. E.g. {duration: 0.2, delay: 1, timing: 'ease-in'}.
|
| onDeviceBackButton | Back-button handler. |
| maskColor | Color of the background mask. Default is “rgba(0, 0, 0, 0.2)”. |
| visible | Whether the action sheet is visible or not. |
| disabled | Whether the action sheet is disabled or not. |
| cancelable | Whether the action sheet is cancelable or not. A cancelable action sheet can be closed by tapping the background or by pressing the back button on Android devices. |
| Name | Description |
|---|---|
| material | Display a Material Design bottom sheet. |
| Signature | Description |
|---|---|
| show([options]) | Show the action sheet. |
| hide([options]) | Hide the action sheet. |
Show the action sheet.
Returns:
| Name | Type | Description |
|---|---|---|
| options | Object | Parameter object. |
| options.animation | String |
Animation name. Available animations are "none" and "slide".
|
| options.animationOptions | String |
Specify the animation’s duration, delay and timing. E.g. {duration: 0.2, delay: 0.4, timing: 'ease-in'}.
|
| options.callback | Function | This function is called after the action sheet has been revealed. |
Hide the action sheet.
Returns: Resolves to the hidden element
| Name | Type | Description |
|---|---|---|
| options | Object | Parameter object. |
| options.animation | String |
Animation name. Available animations are "none" and "slide".
|
| options.animationOptions | String |
Specify the animation’s duration, delay and timing. E.g. {duration: 0.2, delay: 0.4, timing: 'ease-in'}.
|
| options.callback | Function | This functions is called after the action sheet has been hidden. |
| Name | Description |
|---|---|
| preshow | Fired just before the action sheet is displayed. |
| postshow | Fired just after the action sheet is displayed. |
| prehide | Fired just before the action sheet is hidden. |
| posthide | Fired just after the action sheet is hidden. |
| dialogcancel | Fired when the action sheet is canceled. |
Fired just before the action sheet is displayed.
| Name | Type | Description |
|---|---|---|
| event | Object | Event object. |
| event.actionSheet | Object | Component object. |
| event.cancel | Function | Execute this function to stop the action sheet from being shown. |
Fired just after the action sheet is displayed.
| Name | Type | Description |
|---|---|---|
| event | Object | Event object. |
| event.actionSheet | Object | Component object. |
Fired just before the action sheet is hidden.
| Name | Type | Description |
|---|---|---|
| event | Object | Event object. |
| event.actionSheet | Object | Component object. |
| event.cancel | Function | Execute this function to stop the action sheet from being hidden. |
Fired just after the action sheet is hidden.
| Name | Type | Description |
|---|---|---|
| event | Object | Event object. |
| event.actionSheet | Object | Component object. |
Fired when the action sheet is canceled.
| Name | Type | Description |
|---|
If you have any questions, use our Community Forum or talk to us on Discord chat. The Onsen UI team and your peers in the community will work together to help solve your issues.
For bug reports and feature requests use our GitHub Issues page.