SourceCitation
Mẫu chuẩnMột chip cho biết dữ kiện đến từ nguồn nào và còn mới đến đâu; bấm vào mở popover với đúng dữ kiện và bản sửa. Không bao giờ hiện điểm tin cậy.
Playground
Tone fresh. Bấm chip để mở dữ kiện.
import { SourceCitation } from "@nexobox/ui";
<SourceCitation
name="Bảng giá"
freshness="cập nhật 10:20"
tone="fresh"
fact="Áo sơ mi lụa trơn, size M: 450.000 ₫."
revision="Bản 12 · 10:20 hôm nay"
/>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
Chủ shop không duyệt được một câu trả lời nếu không biết Linh lấy giá từ đâu. Một con số phần trăm không giúp gì; một chip tên nguồn kèm độ mới, bấm ra đúng dòng dữ kiện, thì giúp.
Khi nào sử dụng
Nên dùng
Thẻ đề xuất trả lời trong hộp thư (mỗi dữ kiện một chip), khung nguồn trong rail chi tiết công việc, mọi nơi một con số hoặc câu khẳng định cần truy được về nguồn.
Khi nào không dùng
Tránh dùng
| Không dùng cho | Dùng thay |
|---|---|
| Điểm tin cậy hay phần trăm chắc chắn | Không có — hiển thị nguồn, không hiển thị độ tự tin |
| Liên kết điều hướng sang trang khác | Link thường; chip này mở popover tại chỗ |
| Trạng thái của một lệnh đã gửi | EffectStatus |
Dựng từ
| Primitive | Vai trong composite |
|---|---|
| Popover | Mở đúng dữ kiện và bản sửa khi bấm hoặc Enter; Esc đóng |
| Icon | Biểu tượng theo tone, luôn đi kèm chữ |
Anatomy
| # | Phần | Ghi chú |
|---|---|---|
| 1 | Chip | Pill cao tối thiểu control-xs, vùng chạm 44px trên con trỏ thô, tên nguồn đậm rồi độ mới |
| 2 | Icon tone | Tick (fresh), đồng hồ (stale), cảnh báo (conflict); màu từ token status-*-icon |
| 3 | Popover | Nhãn nhỏ, dữ kiện trong blockquote có vạch brand, dòng tên nguồn và bản sửa |
| 4 | Ghi chú tone | Chỉ hiện khi stale hoặc conflict: một câu nói vì sao và nên làm gì |
Variants
| Variant | Hiển thị |
|---|---|
fresh | Nền surface-subtle, icon thành công |
stale | Nền và chữ cảnh báo; chip đổi sang hổ phách |
conflict | Nền và chữ nguy hiểm; hai nguồn nói khác nhau |
States
| State | Hành vi | Trợ năng |
|---|---|---|
| Default | Chip đóng | Nút; tone đọc thành sr-only "Còn mới / Đã cũ / Mâu thuẫn" |
| Hover | Nền surface-hover (chỉ fresh) | — |
| Focus-visible | Vòng focus của kit | Không bị popover che |
| Open | Popover mở bên dưới, focus vào popover | Radix Popover: Esc đóng, focus về chip |
| Reduced motion | Không animation popover (token đã bằng none) | — |
Bàn phím & trợ năng
Seam — host sở hữu gì
Composite không tính độ mới và không biết nguồn nào mâu thuẫn. Host truyền tone, freshness, fact, revision và note đã chuẩn bị.
API & triển khai
| Prop | Mặc định | Quy ước |
|---|---|---|
| name | — | Bắt buộc. Tên nguồn chủ shop hiểu. |
| freshness | — | Bắt buộc. Ví dụ "cập nhật 10:20" hoặc "đã cũ 3 ngày". |
| tone | "fresh" | "fresh" | "stale" | "conflict". |
| fact | — | Bắt buộc. Đúng dữ kiện đã dùng. |
| revision | — | Bắt buộc. Dấu bản sửa. |
| note | undefined | Một câu, chỉ hiện khi tone khác fresh. |
| factLabel | "Dữ kiện được dùng" | Nhãn đầu popover. |
| toneLabels | tiếng Việt | Từ đọc cho từng tone. |
Design tokens
--nf-semantic-status-{success,warning,danger}-icon, --nf-semantic-status-warning-background, --nf-semantic-status-danger-background, --nf-semantic-surface-subtle, --nf-semantic-brand-accent, --nf-foundation-radius-pill, --nf-foundation-space-*, --nf-component-button-xs-height, --nf-component-focus-*.
Do / Don't
Nên dùng
Tên nguồn bằng từ chủ shop dùng (Bảng giá, FAQ đổi trả). Đúng dòng dữ kiện trong popover. Tone stale và conflict luôn kèm một câu hướng xử lý.
Tránh dùng
Hiện phần trăm tin cậy. Rút gọn dữ kiện thành “theo bảng giá” mà không có dòng gốc. Chỉ đổi màu mà không đổi icon và chữ.