Modal
Uso
SModal es un modal de bajo nivel que teletransporta contenido al body con un overlay de backdrop, transiciones de fade/slide y bloqueo automático de scroll. No incluye contenido estilizado — tú proporcionas tu propia tarjeta, formulario o layout dentro.
Usa v-model:open o :open + @update:open para controlar la visibilidad.
Responsive
Por defecto, responsive está en true. En móvil, el contenido del modal se posiciona en la parte inferior de la pantalla. En pantallas más grandes (breakpoint sm en adelante), se centra verticalmente. Establece responsive en false para centrar siempre el contenido.
Posicion
Usa la prop position para controlar la ubicacion vertical del modal en la pantalla. Los valores disponibles son top, nearTop, center y bottom. Cuando responsive esta en true, la posicion solo aplica en escritorio — en movil, el modal siempre se desliza desde abajo.
Prevenir Cierre
Cuando preventClose está habilitado, hacer clic en el backdrop no cierra el modal. El usuario debe cerrarlo mediante una acción explícita, como un botón de cerrar dentro del contenido.
Props
| Prop | Tipo | Default | Descripción |
|---|---|---|---|
open | boolean | - | Controla la visibilidad del modal |
position | 'top' | 'nearTop' | 'center' | 'bottom' | - | Posicion vertical del modal en la pantalla |
responsive | boolean | true | Cuando es true, posiciona el contenido en la parte inferior en movil y centrado en escritorio |
preventClose | boolean | false | Previene que el modal se cierre al hacer clic en el backdrop |
Eventos
| Evento | Payload | Descripción |
|---|---|---|
update:open | boolean | Se emite cuando el modal solicita cerrarse (clic en backdrop) |
close | - | Se emite cuando el modal solicita cerrarse (deprecado, usar update:open) |
Slots
| Nombre | Descripción |
|---|---|
default | Contenido del modal. Debes proporcionar tu propio contenedor estilizado (tarjeta, panel, etc.) |
Breadcrumbs
Un componente de navegación que muestra la ubicación de la página actual dentro de una estructura jerárquica, ayudando a los usuarios a comprender su posición en la aplicación.
Modal Card
Un modal pre-estilizado que combina SModal y SCard, proporcionando un diálogo listo para usar con título, descripción, icono y slots de acciones.