Modal Confirm
Uso
SModalConfirm envuelve SModalCard para proporcionar un diálogo de confirmación listo para usar. Incluye botones de confirmar y cancelar integrados, un ícono de peligro por defecto, y emite un evento confirm cuando el usuario acepta.
Usa v-model:open para controlar la visibilidad y escucha @confirm para la acción de confirmación.
Con Icono
Usa la prop icon con una cadena preestablecida ('primary', 'success', 'danger', 'warning', 'info') para mostrar un ícono predefinido con colores correspondientes. El ícono por defecto es 'danger'.
Cerrable
Establece closable en true para mostrar un botón de cierre en el encabezado. Cuando está habilitado, el título y la descripción se alinean a la izquierda.
Prevenir Cierre
Cuando preventClose está habilitado, hacer clic en el fondo no cierra el modal. El usuario debe cerrarlo a través de los botones de confirmar o cancelar.
Responsivo
Por defecto, responsive es true. En dispositivos móviles, 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.
Contenido Personalizado
Usa el slot por defecto para reemplazar la prop description con contenido HTML personalizado.
Props
| Prop | Tipo | Default | Descripción |
|---|---|---|---|
open | boolean | - | Controla la visibilidad del modal |
description | string | - | Texto de descripción mostrado en el cuerpo del modal |
title | string | 'Confirm' | Texto del título del modal |
icon | FunctionalComponent | 'primary' | 'success' | 'danger' | 'warning' | 'info' | 'danger' | Ícono a mostrar. Usa una cadena para preestablecidos o un componente para íconos personalizados |
confirmText | string | 'Confirm' | Texto del botón de confirmar |
cancelText | string | 'Cancel' | Texto del botón de cancelar |
closable | boolean | false | Muestra un botón de cierre en el encabezado |
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 fondo |
Eventos
| Evento | Payload | Descripción |
|---|---|---|
update:open | boolean | Emitido cuando el modal solicita abrirse o cerrarse |
confirm | - | Emitido cuando se hace clic en el botón de confirmar |
Slots
| Nombre | Descripción |
|---|---|
default | Reemplaza el texto de descripción con contenido personalizado |
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.
Modal Left
Un modal de altura completa que se desliza desde el lado izquierdo de la pantalla, ideal para paneles laterales y cajones de navegación.