v-ons-alert-dialog

Alert dialog that is displayed on top of the current screen. Useful for displaying questions, warnings or error messages to the user. The title, content and buttons can be easily customized and it will automatically switch style based on the platform. To use the component it can either be attached directly to the <body> component or dynamically created from a template using the $ons.createAlertDialog(template) utility function and the <v-ons-template> tag.

Tutorial

See also

Props

Name Type Default Value Description
cancelable Boolean If this attribute is set the dialog can be closed by tapping the background or by pressing the back button on Android devices. Optional.
disabled Boolean If this attribute is set the dialog is disabled. Optional.
Object Object keys will be treated as button names and their corresponding values must be functions that are called on click. It can be provided inside a slot="footer" component instead. Optional.
mask-color String Color of the background mask. Default is “rgba(0, 0, 0, 0.2)”. Optional.
modifier String The appearance of the dialog. Optional.
options.animation String The animation used when showing and hiding the dialog. Can be either "none" or "default". Optional.
options.animationOptions Expression Specify the animation’s duration, timing and delay with an object literal. E.g. {duration: 0.2, delay: 1, timing: 'ease-in'}. Optional.
title String Represents the dialog title. It can be provided inside a slot="title" component instead. Optional.
visible Boolean Specify the visibility of the component. Optional.

Preset Modifiers

Name Description
material Material Design style
rowfooter Horizontally aligns the footer buttons.

Events Summary

Name Description
preshow Fired just before the alert dialog is displayed.
postshow Fired just after the alert dialog is displayed.
prehide Fired just before the alert dialog is hidden.
posthide Fired just after the alert dialog is hidden.
update:visible Fired right after user interaction. Useful to update visible prop.
deviceBackButton Fired on device back button. Default behavior is hiding the component if it is cancelable. Otherwise, calls parent handler.

Events

preshow

Fired just before the alert dialog is displayed.

Parameters
Name Type Description
event Object Event object.
event.alertDialog Object Alert dialog object.
event.cancel Function Execute to stop the dialog from showing.

postshow

Fired just after the alert dialog is displayed.

Parameters
Name Type Description
event Object Event object.
event.alertDialog Object Alert dialog object.

prehide

Fired just before the alert dialog is hidden.

Parameters
Name Type Description
event Object Event object.
event.alertDialog Object Alert dialog object.
event.cancel Function Execute to stop the dialog from hiding.

posthide

Fired just after the alert dialog is hidden.

Parameters
Name Type Description
event Object Event object.
event.alertDialog Object Alert dialog object.

update:visible

Fired right after user interaction. Useful to update visible prop.

Parameters
Name Type Description
event Number New value for visible prop.

deviceBackButton

Fired on device back button. Default behavior is hiding the component if it is cancelable. Otherwise, calls parent handler.

Parameters
Name Type Description
event Object Event object.
event.preventDefault Function Avoids the default behavior.
event.callParentHandler Function Runs the handler for the immediate parent that supports device back button.

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.