Toaster
Mẫu chuẩnThông báo tạm, neo đáy. Năm biến thể đổi icon, không đổi nền. Tối đa ba toast.
Playground
Vùng thông báo gắn một lần trên trang này. danger và toast có hành động không tự tắt.
import { Toaster, toast } from "@nexobox/ui";
<Toaster label="Thông báo ({hotkey})" />
toast({
title: "Đã lưu đơn hàng",
variant: "information",
});Khi nào sử dụng
Nên dùng
Báo một việc đã xong, thất bại, hoặc đổi, khi không cần câu trả lời và không chuyển tiêu điểm.
Tránh dùng
Câu hỏi thì dùng Dialog. Xác nhận xoá thì dùng Dialog. Lỗi của một ô thì viết cạnh ô. Không dùng cho tiến độ việc dài.
Anatomy
Một vùng, không có children. Mỗi toast có icon biến thể, tiêu đề, mô tả tuỳ chọn, hành động tuỳ chọn, và nút đóng luôn có. Glyph 20px nằm giữa một ô cao bằng dòng tiêu đề. Tiêu đề và câu phụ cách nhau 8px.
States
Vùng đã gắn và đang trống. Không có thông báo.
Panel nổi, viền mảnh, bóng overlay. Thông báo lịch sự.
danger không có đồng hồ. Toast có hành động cũng chờ người đóng.
Toast thứ tư đóng toast cũ nhất ngay.
Đưa chuột lên toast thì đồng hồ dừng. Vuốt xuống để đóng. Thả sớm thì nảy lại. Đóng thì trượt ra.
Khi hệ thống xin giảm chuyển động, toast hiện và mất không trượt, không mờ.
Không có disabled. Không có empty, loading, hay invalid. Focus-visible nằm trên nút đóng và nút hành động khi Tab tới. F8 đưa tiêu điểm vào vùng.
Design tokens
Nền panel là --nf-semantic-surface-raised. Bo góc giữ --nf-component-panel-radius. Đệm đọc --nf-component-toaster-padding (16px). Icon cách cột chữ bằng --nf-component-toaster-gap (12px). Tiêu đề và câu phụ cách nhau bằng --nf-component-toaster-content-gap (8px). Icon đọc --nf-semantic-status-*-icon, glyph 20px căn giữa một ô cao bằng dòng body. Không dùng nền trạng thái. Chuyển động --nf-motion-toast-in và --nf-motion-toast-out. Tầng --nf-foundation-layer-toast.
API & triển khai
| Prop | Mặc định | Quy ước |
|---|---|---|
| Toaster label | Notifications ({hotkey}) | Tên vùng. Giữ chỗ {hotkey}. |
| hotkey | F8 | Dãy phím đưa tiêu điểm vào vùng. |
| toast title | — | Bắt buộc. Một câu kết quả. |
| variant | information | information, success, warning, danger, neutral. |
| duration | 6000 | danger và toast có action mặc định không tự tắt. |
| action | — | label, altText, onSelect. altText là câu đầy đủ. |