<ActionSheet />

Action/bottom sheet that is displayed on top of current screen. The action sheet is useful for displaying a list of options and asking the user to make a decision. An ActionSheetButton component 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.

Tutorial

Dialogs

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>

Notification methods

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

Props

Name Type Default Value Description
onCancel function Called only if isCancelable is true. It will be called after tapping the background or by pressing the back button on Android devices. Optional.
isOpen bool Indicates whether the dialog is open and shown. Required.
isCancelable bool

Specifies whether the dialog is cancelable or not. A cancelable dialog will call onCancel when tapping the background or or pressing the back button on Android devices

Optional.
isDisabled bool Specifies whether the dialog is disabled. Optional.
animation string The animation used when showing and hiding the dialog. Can be either "none" or "default". Optional.
modifier string The appearance of the dialog. Optional.
maskColor string Color of the background mask. Default is “rgba(0, 0, 0, 0.2)” Optional.
animationOptions object Specify the animation’s duration, delay and timing. E.g. {duration: 0.2, delay: 0.4, timing: 'ease-in'}. Optional.
onPreShow function Called just before the action sheet is displayed. Optional.
onPostShow function Called just after the action sheet is displayed. Optional.
onPreHide function Called just before the action sheet is hidden. Optional.
onPostHide function Called just after the action sheet is hidden. Optional.
onDeviceBackButton function Custom handler for device back button. Optional.

Preset Modifiers

Name Description
material Display a Material Design bottom sheet.

Discussion

Need Help?

If you have any questions, use our Community Forum or talk to us via Gitter 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.