SToast
Uso
El componente SToast muestra mensajes de notificación con selección automática de icono basada en el tipo. Admite títulos, descripciones y puede hacerse cerrable.
Tipos
SToast admite tres tipos de notificación, cada uno con un icono y esquema de color distinto: success (verde), error (rojo) y warning (amarillo).
Con Descripción
Agrega una descripción debajo del título para proporcionar contexto adicional para la notificación.
Borde Izquierdo
Habilita un borde izquierdo coloreado para hacer que el toast sea más visualmente prominente.
Cerrable
Haz el toast cerrable agregando un botón de cerrar que emite un evento closeToast cuando se hace clic.
Props
| Prop | Tipo | Default | Descripción |
|---|---|---|---|
type | 'success' | 'error' | 'warning' | 'success' | El tipo de notificación que determina el icono y los colores |
title | string | - | El texto del mensaje principal a mostrar |
description | string | - | Texto secundario opcional mostrado debajo del título |
closeable | boolean | false | Si se debe mostrar un botón de cerrar |
leftBorder | boolean | false | Si se debe mostrar un borde izquierdo coloreado |
Eventos
| Evento | Payload | Descripción |
|---|---|---|
closeToast | - | Se emite cuando se hace clic en el botón de cerrar |
Slots
| Nombre | Descripción |
|---|---|
default | Contenido personalizado para el título (reemplaza la prop title) |
description | Contenido personalizado para la descripción (reemplaza la prop description) |
SLink
Un componente de hipervínculo estilizado para crear enlaces de texto clicables con efectos de hover y comportamiento de destino configurable.
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.