Toast API · Needless UI

匯入

import-toast.ts

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

用來顯示 Toast 的服務。可以在任何地方注入。

NuiToaster: 屬性
名稱	型別	說明
`toasts`方法	`Signal<readonly NuiToast[]>`	畫面上的所有 Toast，最新的排在最前面。
`show`方法	`(options: NuiToastOptions \| string) => NuiToastRef`	顯示一則 Toast。傳入標題，或傳入包含描述、色調、持續時間、操作或 id 的選項。
`success`方法	`(title, options?) => NuiToastRef`	顯示一則成功 Toast。
`warning`方法	`(title, options?) => NuiToastRef`	顯示一則警告 Toast。
`danger`方法	`(title, options?) => NuiToastRef`	顯示一則危險 Toast。它會停留 8 秒，並會立即朗讀。
`promise`方法	`(promise, messages) => Promise`	在 Promise 完成前顯示載入中的 Toast，之後顯示對應的成功或危險訊息。
`dismiss`方法	`(id?: string) => void`	關閉一則 Toast，或關閉全部。

Toast 出現的區域。在應用程式殼層中放置一次即可。

NuiToasterRegion: 屬性
名稱	型別	預設值	說明
`position`輸入	`'top-start' \| 'top-center' \| 'top-end' \| 'bottom-start' \| 'bottom-center' \| 'bottom-end'`	`'bottom-end'`	可視區域的某個角落或邊緣。開頭端和結尾端會依循文字方向。
`expanded`輸入	`boolean`	`false`	讓堆疊一直保持展開。
`label`輸入	`string`	`'Notifications (Alt+T)'`	區域的無障礙名稱。請在其中說明如何移到這個區域。
`closeLabel`輸入	`string`	`'Dismiss'`	關閉按鈕的無障礙名稱。
`hotkey`輸入	`string`	`'KeyT'`	與 Alt 搭配使用、將焦點移到最新一則 Toast 的按鍵，以 `KeyboardEvent.code` 表示。