Needless UI

Mga component

Toast

Maiikling mensahe na nagpapatong-patong, puwedeng i-swipe palayo at hindi kailanman nang-aagaw ng focus.

Import

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

NuiToaster

Ang service na nagpapakita ng mga toast. I-inject ito kahit saan.

Selector
inject(NuiToaster)
PangalanUriDefaultPaglalarawan
toastsMethodSignal<readonly NuiToast[]>Bawat toast na nasa screen, pinakabago muna.
showMethod(options: NuiToastOptions | string) => NuiToastRefNagpapakita ng toast. Magpasa ng title, o ng mga opsyon na may description, tone, duration, action o id.
successMethod(title, options?) => NuiToastRefNagpapakita ng success toast.
warningMethod(title, options?) => NuiToastRefNagpapakita ng warning toast.
dangerMethod(title, options?) => NuiToastRefNagpapakita ng danger toast. Nananatili ito nang 8 segundo at ina-announce nang assertive.
promiseMethod(promise, messages) => PromiseNagpapakita ng loading toast hanggang ma-settle ang promise, saka ang success o danger message nito.
dismissMethod(id?: string) => voidDini-dismiss ang isang toast, o lahat ng mga ito.

NuiToasterRegion

Ang region kung saan lumilitaw ang mga toast. Ilagay ito nang isang beses, sa app shell.

Selector
nui-toaster
PangalanUriDefaultPaglalarawan
positionInput'top-start' | 'top-center' | 'top-end' | 'bottom-start' | 'bottom-center' | 'bottom-end''bottom-end'Sulok o gilid ng viewport. Sumusunod sa direksyon ng text ang start at end.
expandedInputbooleanfalsePinapanatiling nakabukas ang stack.
labelInputstring'Notifications (Alt+T)'Accessible name ng region. Sabihin kung paano ito maaabot.
closeLabelInputstring'Dismiss'Accessible name ng mga close button.
hotkeyInputstring'KeyT'Ang key, bilang KeyboardEvent.code, na naglilipat ng focus sa pinakabagong toast kasabay ng Alt.