Modal Card
Este componente extiende SModal. Consulta el componente base para props compartidas como open, position, responsive y preventClose.
Uso
SModalCard combina SModal y SCard en un solo componente, ofreciendo un diálogo modal completamente estilizado. Soporta títulos, descripciones, iconos, comportamiento de cierre y botones de acción.
Usa v-model:open o :open + @update:open para controlar la visibilidad.
Tamaños
Usa la prop size para cambiar el padding y el radio de borde de la tarjeta.
Con Icono
Usa la prop icon con un string predefinido ('primary', 'success', 'danger', 'warning', 'info') para mostrar un icono predefinido con colores correspondientes.
Tipo de Icono
Usa la prop iconType para alternar entre los estilos 'solid' (por defecto) y 'ping'.
Cerrable
Establece closable en true para mostrar un botón de cierre en el encabezado de la tarjeta. El botón de cierre emite update:open con false.
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.
Responsive
Por defecto, responsive está en true. En móvil, el modal se posiciona en la parte inferior de la pantalla. En pantallas más grandes, se centra verticalmente. Establece responsive en false para centrar siempre el contenido.
Props
| Prop | Tipo | Default | Descripción |
|---|---|---|---|
open | boolean | - | (de SModal) Controla la visibilidad del modal |
position | 'top' | 'nearTop' | 'center' | 'bottom' | - | (de SModal) Posicion vertical del modal en la pantalla |
responsive | boolean | true | (de SModal) Cuando es true, posiciona el contenido en la parte inferior en movil y centrado en escritorio |
preventClose | boolean | false | (de SModal) Previene que el modal se cierre al hacer clic en el backdrop |
title | string | - | Texto del titulo de la tarjeta |
size | 'sm' | 'md' | 'md' | Tamaño de la tarjeta (afecta padding y radio de borde) |
icon | FunctionalComponent | 'primary' | 'success' | 'danger' | 'warning' | 'info' | - | Icono a mostrar. Usa un string para presets o un componente para iconos personalizados |
iconColor | 'primary' | 'success' | 'danger' | 'warning' | 'info' | - | Sobrescribe el color del icono independientemente de la variante |
iconType | 'solid' | 'ping' | 'solid' | Estilo de visualización del icono |
closable | boolean | - | Muestra un boton de cierre en el encabezado de la tarjeta |
actions | TAction[] | - | Array de botones de accion renderizados en un footer dividido |
TAction es un objeto con label: string, variant, outline, y un callback onClick.| class | string | - | Clases CSS adicionales aplicadas a la tarjeta |
Eventos
| Evento | Payload | Descripción |
|---|---|---|
update:open | boolean | Se emite cuando el modal solicita cerrarse (clic en backdrop o botón de cierre) |
Slots
| Nombre | Descripción |
|---|---|
default | Contenido principal de la tarjeta |
description | Texto descriptivo debajo del título |
actions | Sección de botones de acción en la parte inferior de la tarjeta |