Dialog Activator

In addition using the activator slot, we can instead use the activator prop to activate a dialog. By placing the dialog component inside the button, and setting the activator prop value to “parent” we can designate the parent (button) as the activator.

Dialog v-model

You can also trigger a dialog by simply updating the v-model, without using either activator slot or prop. In this case, the dialog will not appear to be activated by any specific element, and will simply appear in the middle of the screen.

Dialog Fullscreen

Due to limited space, full-screen dialogs may be more appropriate for mobile devices than dialogs used on devices with larger screens.

Dialog Transitions

You can make the dialog appear from the top or the bottom.

Dialog Persistent

Persistent dialogs are not dismissed when touching outside or pressing the esc key.

Dialog Scrollable

Example of a dialog with scrollable content.

Dialog Form

A simple example of a form in a dialog.

Nested Dialog

Dialogs can be nested: you can open one dialog from another.