Needless UI

Componenti

Toast

Brevi messaggi che si impilano, si scartano con uno swipe e non rubano mai il focus.

Import

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

NuiToaster

Il servizio che mostra i toast. Iniettalo ovunque.

Selettore
inject(NuiToaster)
NomeTipoPredefinitoDescrizione
toastsMetodoSignal<readonly NuiToast[]>Tutti i toast sullo schermo, dal più recente.
showMetodo(options: NuiToastOptions | string) => NuiToastRefMostra un toast. Passa un titolo, oppure delle opzioni con descrizione, tono, durata, azione o id.
successMetodo(title, options?) => NuiToastRefMostra un toast di successo.
warningMetodo(title, options?) => NuiToastRefMostra un toast di avviso.
dangerMetodo(title, options?) => NuiToastRefMostra un toast danger. Resta 8 secondi e viene annunciato in modo prioritario.
promiseMetodo(promise, messages) => PromiseMostra un toast di caricamento finché la promise non si risolve, poi il suo messaggio di successo o di errore.
dismissMetodo(id?: string) => voidChiude un toast, o tutti.

NuiToasterRegion

La regione in cui compaiono i toast. Inseriscila una sola volta, nella shell dell’app.

Selettore
nui-toaster
NomeTipoPredefinitoDescrizione
positionInput'top-start' | 'top-center' | 'top-end' | 'bottom-start' | 'bottom-center' | 'bottom-end''bottom-end'Angolo o bordo del viewport. Inizio e fine seguono la direzione del testo.
expandedInputbooleanfalseTiene la pila aperta a ventaglio.
labelInputstring'Notifications (Alt+T)'Nome accessibile della regione. Indica come raggiungerla.
closeLabelInputstring'Dismiss'Nome accessibile dei pulsanti di chiusura.
hotkeyInputstring'KeyT'Il tasto, come KeyboardEvent.code, che insieme ad Alt sposta il focus sul toast più recente.