EffectStatus
Mẫu chuẩnNhãn vòng đời trung thực của một việc đã nhờ kênh làm: đang gửi, đã gửi, đã nhận, cộng với chưa rõ và không gửi được. Có chỗ cho một hành động khắc phục. Vùng aria-live polite, riêng unknown và failed là assertive.
Playground
State pending.
import { EffectStatus } from "@nexobox/ui";
<EffectStatus state="pending" />Tất cả trạng thái
Mọi trạng thái của composite, dựng thật từ @nexobox/ui, theo theme và brand đang chọn ở Playground.
Bài toán
Nút Gửi bấm xong mà hiện ngay tick xanh là nói dối khi tin chưa tới. Chủ shop cần thấy đúng điều hệ thống biết: đang gửi, đã gửi, chỉ khi kênh báo mới là đã nhận, và khi không biết thì nói không biết.
Khi nào sử dụng
Nên dùng
Bong bóng tin nhắn vừa gửi trong hộp thư, đơn hàng đẩy sang hệ thống khác, mọi lệnh có kết quả bất đồng bộ do bên thứ ba xác nhận.
Khi nào không dùng
Tránh dùng
| Không dùng cho | Dùng thay |
|---|---|
| Trạng thái của một bản ghi (đang mở, đã đóng) | Badge hoặc StatusDot |
| Tiến trình có phần trăm | Progress |
| Lý do một việc bị chặn | ReasonRemedyRow |
Dựng từ
| Primitive | Vai trong composite |
|---|---|
| Icon | Biểu tượng theo state, luôn đi kèm nhãn chữ |
| Button (slot remedy) | Host truyền nút khắc phục qua slot; composite không tự dựng hành động |
Anatomy
| # | Phần | Ghi chú |
|---|---|---|
| 1 | Icon + nhãn | Vùng live (polite, assertive cho unknown và failed); icon và nhãn crossfade bằng opacity khi state đổi |
| 2 | Chi tiết | Lý do ngắn sau nhãn, ví dụ "Kênh mất kết nối" |
| 3 | Ba đoạn vòng đời | Ba vạch nhỏ trang trí: một, hai, ba đoạn sáng cho pending, sent, delivered; unknown và failed không sáng |
| 4 | Remedy | Slot cho đúng một hành động tiếp theo |
Variants
| Variant | Hiển thị |
|---|---|
pending | Đồng hồ, chữ muted, một đoạn sáng |
sent | Tick, hai đoạn sáng; chưa phải đã nhận |
delivered | Tick vòng xanh, ba đoạn; chỉ khi kênh báo |
unknown | Cảnh báo hổ phách, không đoạn nào sáng; không tự gửi lại |
failed | Dấu huỷ đỏ kèm lý do; remedy là Kết nối lại |
States
| State | Hành vi | Trợ năng |
|---|---|---|
| Mỗi state | Như variants | Hai vùng live cố định: polite cho pending, sent, delivered; assertive (role alert) cho unknown, failed. Chỉ vùng khớp chứa chữ nên mỗi lần đổi được đọc một lần |
| Chuyển state | Nhãn và icon crossfade opacity, token duration-fast | — |
| Reduced motion | Token duration bằng 0ms nên đổi tức thì | — |
Bàn phím & trợ năng
Seam — host sở hữu gì
Composite không quyết định state. Host ánh xạ kết quả thật của kênh sang state; chỉ truyền delivered khi kênh báo. Không bao giờ tự gửi lại khi unknown.
API & triển khai
| Prop | Mặc định | Quy ước |
|---|---|---|
| state | — | "pending" | "sent" | "delivered" | "unknown" | "failed". |
| labels | tiếng Việt | Ghi đè nhãn theo state. |
| detail | undefined | Lý do ngắn sau nhãn. |
| remedy | undefined | Slot cho đúng một hành động tiếp theo. |
| aria-label | undefined | Tên nhóm khi cần. |
Design tokens
--nf-semantic-status-{information,success,warning,danger}-icon, -foreground, --nf-semantic-text-muted, --nf-foundation-motion-duration-fast, --nf-foundation-motion-easing-standard, --nf-foundation-space-1, -2, -3.
Do / Don't
Nên dùng
Chỉ hiện Đã nhận khi kênh báo. Khi không biết, nói Chưa rõ và để chủ shop kiểm tra lại. Một remedy, đúng việc cần làm.
Tránh dùng
Hiện tick xanh ngay khi bấm Gửi. Tự gửi lại khi unknown. Dùng cùng một icon cho unknown và failed.