Angular Toast-Benachrichtigungsservice | ng-hub-ui-toast
Standalone Angular Toast-Benachrichtigungsservice mit Signals, Lifecycle-Observables, Fortschrittsleiste, sechs Positionen und vollständigem Theming über CSS-Variablen.
API-Referenz
Hier ist der vollständige Vertrag für toast: alles, was du binden, abhören, projizieren und gestalten kannst, an einem Ort gesammelt. Verdrahte, was du brauchst, und gestalte, was du willst — es ist standalone und Signals-freundlich.
Inputs
Noch keine Inputs dokumentiert.
Outputs
Noch keine Outputs dokumentiert.
Templates
Noch keine Templates dokumentiert.
CSS-Variablen
Gestalte jedes Pixel mit 15 CSS-Variablen. Überschreibe sie auf :root oder begrenze sie auf einen Wrapper.
Layout & Abstände
Tokens, die Größe, Border-Radius, Padding und Schatten des Toasts steuern.
| Variable | Standard | Typ | Beschreibung |
|---|---|---|---|
--hub-toast-width | 22rem | length | Maximale Breite jeder Toast-Karte. 18rem26rem |
--hub-toast-border-radius | 0.375rem | length | Eckenradius der Toast-Karte. 00.75rem |
--hub-toast-padding-x | 1rem | length | Horizontales Padding innerhalb des Toast-Bodys. 0.75rem1.25rem |
--hub-toast-padding-y | 0.75rem | length | Vertikales Padding innerhalb des Toast-Bodys. 0.5rem1rem |
--hub-toast-gap | 0.5rem | length | Abstand zwischen gestapelten Toasts im Container. 0.25rem0.75rem |
--hub-toast-shadow | 0 2px 8px rgba(0,0,0,.25) | shadow | Schlagschatten der Toast-Karte. none0 4px 20px rgba(0,0,0,.18) |
Farben
Tokens für Hintergrund, Vordergrund und Akzent. Integrierte Typen überschreiben den Akzent aus --hub-sys-color-<type>-*.
| Variable | Standard | Typ | Beschreibung |
|---|---|---|---|
--hub-toast-bg | #323232 | color | Hintergrundfarbe der Toast-Karte. #fffvar(--bs-dark) |
--hub-toast-color | #ffffff | color | Textfarbe des Toast-Bodys. #212529var(--bs-body-color) |
--hub-toast-title-color | inherit | color | Textfarbe der Toast-Überschrift. #fffvar(--bs-emphasis-color) |
--hub-toast-accent | transparent | color | Farbe des linken Rands oder der Hervorhebung; wird für integrierte Typen automatisch aus der DS-Token-Familie gesetzt. var(--hub-sys-color-primary)#0d6efd |
Fortschrittsleiste
Tokens für die Countdown-Leiste, die am unteren Rand des Toasts gerendert wird.
| Variable | Standard | Typ | Beschreibung |
|---|---|---|---|
--hub-toast-progress-height | 4px | length | Höhe des Streifens der Fortschrittsleiste. 2px6px |
--hub-toast-progress-bg | rgba(255,255,255,.4) | color | Füllfarbe der Fortschrittsleiste. rgba(0,0,0,.2)var(--bs-primary) |
Container
Tokens für den festen Overlay-Container, der alle sichtbaren Toasts enthält.
| Variable | Standard | Typ | Beschreibung |
|---|---|---|---|
--hub-toast-container-gap | 0.5rem | length | Vertikaler Abstand zwischen aufeinanderfolgenden Toasts im Container. 0.25rem1rem |
--hub-toast-container-offset | 1rem | length | Abstand vom Bildschirmrand zum Container. 0.5rem2rem |
--hub-toast-zindex | 1090 | number | Stapelreihenfolge des Toast-Containers im Verhältnis zu anderen Overlays. 10509999 |
Styling und Theming
Es sind noch keine Styling-Beispiele dokumentiert. Dieser Abschnitt wird Anpassungsrezepte und Theming-Beispiele enthalten.