Dialog
El componente v-dialog informa a los usuarios acerca de una tarea específica y puede contener información crítica, requerir decisiones o involucrar múltiples tareas. Utiliza los diálogos muy esporádicamente porque interrumpen.
Uso
A dialog contains two slots, one for its activator and one for its content (default). Good for Privacy Policies.
API
Especifica de cuál elemento del DOM debe soltarse este componente. Utiliza ya sea un selector de CSS o una referencia del objeto que apunta al elemento.
Aplica una clase personalizada al elemento que se soltó. Esto es útil porque el contenido se mueve al final de la app y no puede ser alcanzable por las clases que se pasan directamente al componente.
Components.Dialogs.
Deshabilita la posibilidad de abrir el diálogo.
Especifica que el modal será forzado a 100% del ancho
Cambia la distribución para ser mostrada en pantalla completa
Esconde el overlay
Renderiza el contenido condicionalmente en el lifecycle hook mounted. Sólo renderizará el contenido si es activado.
Components.Dialogs.
El ancho máximo del contenido
Deshabilita el efecto 'de rebote' cuando se hace click afuera de los contenidos del v-dialog cuando se usa la prop persistent
Configura el origen de la transición
Hacer click fuera no cerrará el diálogo
Components.Dialogs.
Cuando se asigna el valor true, espera un card, card-title, card-text y card-actions. Adicionalmente card-text debe tener una altura específica. Colocará overflow-y en el card-text.
Configura la transición del componente. Puede ser una de las transiciones prefabricadas o una propia.
Controla la visibilidad
Configura el ancho del diálogo
Ejemplos
Sin activator
Si por alguna razón no puedes utilizar el slot activator, asegúrate de agregar el modificador .stopal evento que acciona el diálogo.
Modal
Similar a un Diálogo Simple, excepto porque no se cierra cuando tocas afuera del mismo..
Pantalla completa
Debido al espacio limitado, los diálogos en pantalla completa pueden ser más apropiados para dispositivos móviles que los diálogos que se usan en dispositivos con pantallas más grandes.
Formularios
Un ejemplo simple de un formulario dentro de un diálogo..
Scrollable
Ejemplo de un diálogo con contenido que puede ser desplazado.
Overflowed
Los modales que no caben dentro del espacio disponible en la ventana harán que el contenedor pueda ser desplazado.
Diálogos simples
Al escoger una opción inmediatamente se cierra el menú. Al tocar afuera del díalogo o al presionar 'Atrás' cancela la acción y cancela el diálogo.
Loader
El componente v-dialoghace muy sencillo crear una experiencia de carga personalizada par tu aplicación.