Dialog
The v-dialog component inform users about a specific task and may contain critical information, require decisions, or involve multiple tasks. Use dialogs sparingly because they are interruptive.
Usage
A dialog contains two slots, one for its activator and one for its content (default). Good for Privacy Policies.
API
Specifies which DOM element that this component should detach to. Use either a CSS selector string or an object reference to the element.
Applies a custom class to the detached element. This is useful because the content is moved to the end of the app and is not targettable by classes passed directly on the component.
Applies the dark theme variant
Disables the ability to open the dialog
Specifies the modal to force 100% width
Changes layout for fullscreen display
Hides the display of the overlay
Conditionally renders content on mounted. Will only render content if activated
Applies the light theme variant
The maximum width of the content
Disables the bounce effect when clicking outside of a v-dialog's content when using the persistent prop
Sets the transition origin
Clicking outside will not dismiss the dialog
Components.Dialogs.
When set to true, expects a card, card-title, card-text and card-actions. Additionally, card-text should have specified height. Will set card-text to overflow-y
Sets the component transition. Can be one of the built in transitions or your own.
Controls visibility
Sets the dialog width
Examples
Without activator
If for some reason you are unable to use the activator slot, be sure to add the .stop modifier to the event that triggers the dialog.
Modal
Similar to a Simple Dialog, except that it's not dismissed when touching outside.
Fullscreen
Due to limited space, full-screen dialogs may be more appropriate for mobile devices than dialogs used on devices with larger screens.
Form
Just a simple example of a form in a dialog.
Scrollable
Example of a dialog with scrollable content.
Overflowed
Modals that do not fit within the available window space will scroll the container.
Simple dialogs
Choosing an option immediately closes the menu. Touching outside of the dialog, or pressing Back, cancels the action and closes the dialog.
Loader
The v-dialog component makes it easy to create a customized loading experience for your application.