トーストの API · Needless UI

インポート

import-toast.ts

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

トーストを表示するサービス。どこにでも注入できます。

NuiToaster: プロパティ
名前	型	説明
`toasts`メソッド	`Signal<readonly NuiToast[]>`	画面上のすべてのトースト。新しいものから順に並びます。
`show`メソッド	`(options: NuiToastOptions \| string) => NuiToastRef`	トーストを表示します。タイトル、または説明、トーン、表示時間、アクション、id を含むオプションを渡します。
`success`メソッド	`(title, options?) => NuiToastRef`	成功のトーストを表示します。
`warning`メソッド	`(title, options?) => NuiToastRef`	警告のトーストを表示します。
`danger`メソッド	`(title, options?) => NuiToastRef`	danger のトーストを表示します。8秒間表示され、すぐに読み上げられます。
`promise`メソッド	`(promise, messages) => Promise`	Promise が確定するまで読み込み中のトーストを表示し、その後、成功または danger のメッセージを表示します。
`dismiss`メソッド	`(id?: string) => void`	トーストを1つ、またはすべて閉じます。

トーストが表示される領域。アプリシェルに1つだけ配置します。

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 と組み合わせて、最新のトーストにフォーカスを移すキー。`KeyboardEvent.code` の値で指定します。