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 <template> tag.

Tutorial

Alert dialogs

Alert dialogs are defined using <v-ons-alert-dialog> and <v-ons-alert-dialog-button> tags. Alert dialogs work exactly like normal dialogs but they require some additional markup. With this element you can create a beautifully styled dialog without any additional CSS.

To show or hide the dialog the visible prop is used. An update:visible event is fired when the user interacts with the component (taps the background mask). Use this event to refresh the value of visible prop. Vue’s sync modifier can also be used.

Custom alerts

VOnsAlertDialog allows to create custom alerts with optional inputs, methods or anything else. We can pass all the information with props:

<v-ons-alert-dialog modifier="rowfooter"
  :title="myTitle"
  :footer="{
    Cancel: () => isVisible = false,
    Ok: () => isVisible = false
  }"
  :visible.sync="isVisible"
>

  Content here
</v-ons-alert-dialog>

For higher control, it is also possible to use slots (can be combined with props):

<v-ons-alert-dialog modifier="rowfooter"
  :visible.sync="isVisible"
>
  <span slot="title">Title</span>

  Content here

  <template slot="footer">
    <v-ons-alert-dialog-button @click="isVisible = false">Cancel</v-ons-alert-dialog-button>
    <v-ons-alert-dialog-button @click="isVisible = false">Ok</v-ons-alert-dialog-button>
  </template>
</v-ons-alert-dialog>

The optional rowfooter modifier forces the buttons to be displayed on a single row rather than a column.

Notification methods

The $ons.notification object contains some useful methods to easily show alerts, confirmation dialogs and prompts:

$ons.notification.alert(message, options);
$ons.notification.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.
  });

See also

Props

Name Type 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

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.
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.