Reference > v-ons-dialog

v-ons-dialog

Dialog that is displayed on top of current screen. As opposed to the <ons-alert-dialog> element, this component can contain any kind of content. To use the element it can either be attached directly to the <body> element 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

Simple dialogs are defined using the VOnsDialog component.

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

<v-ons-dialog
  cancelable
  v-model:visible="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 v-model directive can also be used.

Complex dialogs

The VOnsDialog element can get as complex as we need. It can contain pages or even navigators:

<v-ons-dialog>
  <v-ons-page>
    <v-ons-toolbar>...</v-ons-toolbar>

    ...
  </v-ons-page>
</v-ons-dialog>

See also

Props

Name Type Description
animation String The animation used when showing and hiding the dialog. Can be either "none" or "default". Optional.
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.
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.
maskColor String Color of the background mask. Default is "rgba(0, 0, 0, 0.2)". Optional.
modifier String The appearance of the dialog. Optional.
visible Boolean Whether the dialog is visible or not. Optional.

Preset Modifiers

Name Description
material Display a Material Design dialog.

Events

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.
dialogcancel Fired when the dialog is canceled.
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 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.
dialogcancel

Fired when the dialog is canceled.

Parameters
Name Type Description
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.

Need Help?

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