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.
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 |
responsive | boolean | true | Cuando es true, posiciona el contenido en la parte inferior en móvil 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.) |
SBreadcrumbs
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.