Dialog
El componente EDialog presenta contenido modal enfocado sobre la aplicación, coordina su overlay y orden de capas, bloquea el scroll de fondo y administra el foco de teclado. Compón su slot default con cards, formularios o contenido específico de la tarea mientras v-model permanece como fuente de verdad para la visibilidad.
Uso
Abre y cierra el dialog mediante v-model y configura las props comunes del panel y del foco. El activador pertenece a la vista que llama al dialog, por lo que su manejador de clic actualiza el mismo estado controlado.
Cierre y persistencia
Un dialog estándar se cierra mediante una acción explícita, Escape o interacción exterior. Activa persistent cuando el usuario deba completar o cancelar deliberadamente una decisión; el intento de cierre reproduce feedback en lugar de cambiar el modelo.
Dimensiones y superficie
Limita tareas enfocadas con maxWidth, usa fluid para ocupar el ancho disponible y aplica una elevation del framework al panel. El contenido largo hace scroll dentro del dialog mientras el overlay mantiene bloqueado el documento.
Dialogs a pantalla completa
Usa fullscreen para tareas inmersivas o que requieren mucho espacio. El modo elimina márgenes y radio del panel, ocupa el viewport y tiene prioridad sobre maxWidth.
Patrones de composición
El slot default acepta cualquier estructura específica de la tarea. Mantén título, contenido de apoyo y acciones en un orden claro; los formularios deben exponer una acción principal de envío y una forma distinta de cancelar o cerrar.
Foco y accesibilidad
El contenedor expone semántica de dialog, atrapa Tab dentro del panel activo, enfoca el dialog al abrir y restaura el foco previo al cerrar. Proporciona un título visible y una salida explícita, especialmente al activar persistent.
Al cerrar, el foco regresa al botón que abrió el dialog.
Referencia API
Consulta las props públicas verificadas de EDialog. Su evento, slot default y método close expuesto se resumen después de la tabla.
Props de EDialog
| Propiedad | Tipo | Por defecto |
|---|---|---|
| modelValue | boolean | false |
Estado de apertura controlado y sincronizado mediante update:modelValue. | ||
| persistent | boolean | false |
Impide que Escape o la interacción exterior cierren el dialog y reproduce feedback de rechazo. | ||
| maxWidth | string | number | undefined |
Limita el ancho del panel cuando el dialog no está en fullscreen. Los valores numéricos se normalizan a píxeles. | ||
| fluid | boolean | false |
Expande el panel al ancho disponible conservando sus márgenes respecto al viewport. | ||
| fullscreen | boolean | false |
Hace que el panel ocupe todo el viewport e ignora maxWidth. | ||
| absolute | boolean | false |
Posiciona el contenedor del dialog de forma absoluta en lugar de fijarlo al viewport. | ||
| autoFocus | boolean | true |
Mueve el foco al dialog activo cuando se abre. | ||
| restoreFocus | boolean | true |
Devuelve el foco al elemento previamente enfocado cuando el dialog se cierra. | ||
| elevation | Elevation | undefined |
Aplica una clase de elevación del framework al panel del dialog. | ||
Evento, slot y método expuesto
EDialog emite update:modelValue, renderiza contenido mediante su slot default y expone close(force?). close() respeta persistent; close(true) fuerza el cierre.