v-ons-dialog

Dialog that is displayed on top of current screen. As opposed to the <v-ons-alert-dialog> component, this component can contain any kind of content. To use the component it can either be attached directly to the <body> component or dynamically created from a template using the $ons.createDialog(template) utility function and the <template> tag. The dialog is useful for displaying menus, additional information or to ask the user to make a decision. It will automatically be displayed as Material Design when running on an Android device.

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.
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.
visible Boolean Specify the visibility of the component. Optional.

Preset Modifiers

Name Description
material Display a Material Design dialog.

Events Summary

Name Description
preshow Fired just before the dialog is displayed.
postshow Fired just after the dialog is displayed.
prehide Fired just before the dialog is hidden.
posthide Fired just after the 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 dialog is displayed.

Parameters
Name Type Description
event Object Event object.
event.dialog Object Component object.
event.cancel Function Execute this function to stop the dialog from being shown.

postshow

Fired just after the dialog is displayed.

Parameters
Name Type Description
event Object Event object.
event.dialog Object Component object.

prehide

Fired just before the dialog is hidden.

Parameters
Name Type Description
event Object Event object.
event.dialog Object Component object.
event.cancel Function Execute this function to stop the dialog from being hidden.

posthide

Fired just after the dialog is hidden.

Parameters
Name Type Description
event Object Event object.
event.dialog Object Component 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.