Servicio de Notificaciones Toast para Angular | ng-hub-ui-toast
Servicio de notificaciones toast standalone para Angular con Signals, observables de ciclo de vida, barra de progreso, seis posiciones y tematización con variables CSS.
Referencia API
Aquí tienes el contrato completo de toast: todo lo que puedes enlazar, escuchar, proyectar y personalizar, reunido en un solo sitio. Enlaza lo que necesites y dale el estilo que quieras — es standalone y reactivo con signals.
Inputs
Todavía no hay inputs documentados.
Outputs
Todavía no hay outputs documentados.
Templates
Todavía no hay templates documentados.
Variables CSS
Personaliza cada detalle con 15 variables CSS. Sobrescríbelas en :root o acótalas a un contenedor.
Layout y espaciado
Tokens que controlan el tamaño, radio, relleno y sombra del toast.
| Variable | Por defecto | Tipo | Descripción |
|---|---|---|---|
--hub-toast-width | 22rem | length | Anchura máxima de cada tarjeta toast. 18rem26rem |
--hub-toast-border-radius | 0.375rem | length | Radio de esquina de la tarjeta toast. 00.75rem |
--hub-toast-padding-x | 1rem | length | Relleno horizontal dentro del cuerpo del toast. 0.75rem1.25rem |
--hub-toast-padding-y | 0.75rem | length | Relleno vertical dentro del cuerpo del toast. 0.5rem1rem |
--hub-toast-gap | 0.5rem | length | Espacio entre toasts apilados en el contenedor. 0.25rem0.75rem |
--hub-toast-shadow | 0 2px 8px rgba(0,0,0,.25) | shadow | Sombra de la tarjeta toast. none0 4px 20px rgba(0,0,0,.18) |
Colores
Tokens de fondo, texto y acento. Los tipos predefinidos sobreescriben el acento desde --hub-sys-color-<type>-*.
| Variable | Por defecto | Tipo | Descripción |
|---|---|---|---|
--hub-toast-bg | #323232 | color | Color de fondo de la tarjeta toast. #fffvar(--bs-dark) |
--hub-toast-color | #ffffff | color | Color del texto del cuerpo del toast. #212529var(--bs-body-color) |
--hub-toast-title-color | inherit | color | Color del texto del título del toast. #fffvar(--bs-emphasis-color) |
--hub-toast-accent | transparent | color | Color de acento (borde izquierdo o resaltado); se asigna automáticamente desde la familia de tokens DS para tipos predefinidos. var(--hub-sys-color-primary)#0d6efd |
Barra de progreso
Tokens para la barra de cuenta regresiva en la parte inferior del toast.
| Variable | Por defecto | Tipo | Descripción |
|---|---|---|---|
--hub-toast-progress-height | 4px | length | Altura de la franja de la barra de progreso. 2px6px |
--hub-toast-progress-bg | rgba(255,255,255,.4) | color | Color de relleno de la barra de progreso. rgba(0,0,0,.2)var(--bs-primary) |
Contenedor
Tokens para el contenedor superpuesto que agrupa todos los toasts visibles.
| Variable | Por defecto | Tipo | Descripción |
|---|---|---|---|
--hub-toast-container-gap | 0.5rem | length | Espacio vertical entre toasts consecutivos en el contenedor. 0.25rem1rem |
--hub-toast-container-offset | 1rem | length | Distancia desde el borde de la pantalla al contenedor. 0.5rem2rem |
--hub-toast-zindex | 1090 | number | Orden de apilamiento del contenedor de toasts respecto a otros overlays. 10509999 |
Estilos y theming
Todavía no hay ejemplos de estilos documentados. Esta sección incluirá recetas de personalización y ejemplos de theming.