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.

Utilização

A dialog contains two slots, one for its activator and one for its content (default). Good for Privacy Policies.

API

props

slots

Nome

attach

Padrão

false

Tipos

any

Components.Dialogs.

Nome

content-class

Padrão

undefined

Tipos

any

Components.Dialogs.

Nome

dark

Padrão

false

Tipos

boolean

Components.Dialogs.

Nome

disabled

Padrão

false

Tipos

boolean

Components.Dialogs.

Nome

full-width

Padrão

false

Tipos

boolean

Força largura 100%

Nome

fullscreen

Padrão

false

Tipos

boolean

Components.Dialogs.

Nome

hide-overlay

Padrão

false

Tipos

boolean

Components.Dialogs.

Nome

lazy

Padrão

false

Tipos

boolean

Components.Dialogs.

Nome

light

Padrão

false

Tipos

boolean

Components.Dialogs.

Nome

max-width

Padrão

none

Tipos

string | number

Components.Dialogs.

Nome

no-click-animation New in — v1.1

Padrão

false

Tipos

boolean

Components.Dialogs.

Nome

origin

Padrão

'center center'

Tipos

string

Components.Dialogs.

Nome

persistent

Padrão

false

Tipos

boolean

Dialog não fecha ao clicar fora

Nome

return-value

Padrão

undefined

Tipos

any

Components.Dialogs.

Nome

scrollable

Padrão

false

Tipos

boolean

Components.Dialogs.

Nome

transition

Padrão

dialog-transition

Tipos

string | boolean

Components.Dialogs.

Nome

value

Padrão

undefined

Tipos

any

Controla visibilidade

Nome

width

Padrão

auto

Tipos

string | number

A largura do conteúdo

Exemplos

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.

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.

Up Next

Edit this page | language on Github

— Contribution Guide