Needless UI

Komponenten

Toast

Kurze Meldungen, die sich stapeln, sich wegwischen lassen und nie den Fokus stehlen.

Import

import-toast.ts
import { NuiToaster, NuiToasterRegion } from '@needless-ui/angular/toast';

NuiToaster

Der Service, der Toasts anzeigt. Du kannst ihn überall injizieren.

Selektor
inject(NuiToaster)
NameTypStandardwertBeschreibung
toastsMethodeSignal<readonly NuiToast[]>Alle Toasts auf dem Bildschirm, die neuesten zuerst.
showMethode(options: NuiToastOptions | string) => NuiToastRefZeigt einen Toast. Übergib einen Titel oder Optionen mit Beschreibung, Farbton, Dauer, Aktion oder ID.
successMethode(title, options?) => NuiToastRefZeigt einen Erfolgs-Toast.
warningMethode(title, options?) => NuiToastRefZeigt einen Warn-Toast.
dangerMethode(title, options?) => NuiToastRefZeigt einen Danger-Toast. Er bleibt 8 Sekunden und wird mit Vorrang angesagt.
promiseMethode(promise, messages) => PromiseZeigt einen Lade-Toast, bis das Promise abgeschlossen ist, und dann die passende Meldung für Erfolg oder Fehler.
dismissMethode(id?: string) => voidSchließt einen Toast oder alle.

NuiToasterRegion

Die Region, in der Toasts erscheinen. Platziere sie einmal, in der App-Shell.

Selektor
nui-toaster
NameTypStandardwertBeschreibung
positionInput'top-start' | 'top-center' | 'top-end' | 'bottom-start' | 'bottom-center' | 'bottom-end''bottom-end'Ecke oder Rand des Viewports. Start und Ende folgen der Textrichtung.
expandedInputbooleanfalseHält den Stapel aufgefächert.
labelInputstring'Notifications (Alt+T)'Zugänglicher Name der Region. Sag darin, wie man sie erreicht.
closeLabelInputstring'Dismiss'Zugänglicher Name der Schließen-Buttons.
hotkeyInputstring'KeyT'Die Taste als KeyboardEvent.code, die zusammen mit Alt den Fokus auf den neuesten Toast setzt.