Service de Notifications Toast Angular | ng-hub-ui-toast
Service de notifications toast Angular standalone avec Signals, observables de cycle de vie, barre de progression, six positions et thématisation complète par variables CSS.
Référence API
Voici le contrat complet de toast : tout ce que vous pouvez lier, écouter, projeter et personnaliser, réuni au même endroit. Branchez ce dont vous avez besoin et stylisez ce que vous voulez — c’est standalone et compatible avec les signals.
Inputs
Aucun input documenté pour le moment.
Outputs
Aucun output documenté pour le moment.
Templates
Aucun template documenté pour le moment.
Variables CSS
Personnalisez chaque pixel avec 15 variables CSS. Remplacez-les au niveau de :root ou limitez-les à un conteneur.
Mise en page et espacement
Tokens qui contrôlent la taille, le rayon de bordure, le rembourrage et l'ombre du toast.
| Variable | Par défaut | Type | Description |
|---|---|---|---|
--hub-toast-width | 22rem | length | Largeur maximale de chaque carte toast. 18rem26rem |
--hub-toast-border-radius | 0.375rem | length | Rayon des coins de la carte toast. 00.75rem |
--hub-toast-padding-x | 1rem | length | Rembourrage horizontal à l'intérieur du corps du toast. 0.75rem1.25rem |
--hub-toast-padding-y | 0.75rem | length | Rembourrage vertical à l'intérieur du corps du toast. 0.5rem1rem |
--hub-toast-gap | 0.5rem | length | Espace entre les toasts empilés dans le conteneur. 0.25rem0.75rem |
--hub-toast-shadow | 0 2px 8px rgba(0,0,0,.25) | shadow | Ombre portée de la carte toast. none0 4px 20px rgba(0,0,0,.18) |
Couleurs
Tokens d'arrière-plan, de texte et d'accent. Les types intégrés surchargent l'accent depuis --hub-sys-color-<type>-*.
| Variable | Par défaut | Type | Description |
|---|---|---|---|
--hub-toast-bg | #323232 | color | Couleur d'arrière-plan de la carte toast. #fffvar(--bs-dark) |
--hub-toast-color | #ffffff | color | Couleur du texte du corps du toast. #212529var(--bs-body-color) |
--hub-toast-title-color | inherit | color | Couleur du texte du titre du toast. #fffvar(--bs-emphasis-color) |
--hub-toast-accent | transparent | color | Couleur de la bordure gauche ou de l'accentuation ; définie automatiquement depuis la famille de tokens DS pour les types intégrés. var(--hub-sys-color-primary)#0d6efd |
Barre de progression
Tokens pour la barre de décompte affichée au bas du toast.
| Variable | Par défaut | Type | Description |
|---|---|---|---|
--hub-toast-progress-height | 4px | length | Hauteur de la bande de la barre de progression. 2px6px |
--hub-toast-progress-bg | rgba(255,255,255,.4) | color | Couleur de remplissage de la barre de progression. rgba(0,0,0,.2)var(--bs-primary) |
Conteneur
Tokens pour le conteneur superposé fixe qui regroupe tous les toasts visibles.
| Variable | Par défaut | Type | Description |
|---|---|---|---|
--hub-toast-container-gap | 0.5rem | length | Espace vertical entre les toasts consécutifs dans le conteneur. 0.25rem1rem |
--hub-toast-container-offset | 1rem | length | Distance entre le bord de l'écran et le conteneur. 0.5rem2rem |
--hub-toast-zindex | 1090 | number | Ordre d'empilement du conteneur de toasts par rapport aux autres overlays. 10509999 |
Styles et theming
Aucun exemple de style n’est encore documenté. Cette section inclura des recettes de personnalisation et des exemples de theming.