API ของ Toast · Needless UI

Import

import-toast.ts

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

Service สำหรับแสดง Toast ใช้ inject ได้จากทุกที่

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 แบบ danger ซึ่งจะแสดงอยู่ 8 วินาทีและถูกประกาศทันที
`promise`เมธอด	`(promise, messages) => Promise`	แสดง Toast กำลังโหลดจนกว่า promise จะเสร็จสิ้น จากนั้นแสดงข้อความสำเร็จหรือ danger
`dismiss`เมธอด	`(id?: string) => void`	ปิด Toast หนึ่งอัน หรือปิดทั้งหมด

พื้นที่ที่ Toast ปรากฏ วางไว้เพียงครั้งเดียวใน app shell

NuiToasterRegion: พร็อพเพอร์ตี
ชื่อ	ชนิด	ค่าเริ่มต้น	คำอธิบาย
`position`Input	`'top-start' \| 'top-center' \| 'top-end' \| 'bottom-start' \| 'bottom-center' \| 'bottom-end'`	`'bottom-end'`	มุมหรือขอบของ viewport ด้านต้นและด้านท้ายจะเป็นไปตามทิศทางของข้อความ
`expanded`Input	`boolean`	`false`	ให้กอง Toast กางออกอยู่เสมอ
`label`Input	`string`	`'Notifications (Alt+T)'`	ชื่อที่เข้าถึงได้ของพื้นที่ ควรบอกวิธีไปยังพื้นที่นี้ด้วย
`closeLabel`Input	`string`	`'Dismiss'`	ชื่อที่เข้าถึงได้ของปุ่มปิด
`hotkey`Input	`string`	`'KeyT'`	ปุ่มที่ใช้ร่วมกับ Alt เพื่อย้ายโฟกัสไปยัง Toast ล่าสุด ระบุเป็นค่า `KeyboardEvent.code`