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

Dialogs

There are three components used to show dialogs: VOnsDialog, VOnsAlertDialog and VOnsToast. The VOnsDialog component is a general dialog where you can put any content. The VOnsAlertDialog has some default styles that make it easy to show errors, warnings or questions to the user. And VOnsToast is a message (with optional button) that does not stop the app flow.

To show or hide the dialog the visible prop is used.

<v-ons-dialog cancelable
  :visible.sync="show"
>
  Hi!

  <v-ons-button @click="show = false">
    Close
  </v-ons-button>
</v-ons-dialog>

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.

Notification methods

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

1.

$ons.notification.alert(message, options)

2.

$ons.notification.confirm(message, options)

3.

$ons.notification.prompt(message, options)

4.

$ons.notification.toast(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.
  });

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">
    <button class="alert-dialog-button" @click="isVisible = false">Cancel</button>
    <button class="alert-dialog-button" @click="isVisible = false">Ok</button>
  </template>
</v-ons-alert-dialog>

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

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.