AuthorityMeter
Mẫu chuẩnMột thước bốn nấc cho thấy nhân viên số đang được phép tới đâu, trần tối đa ở đâu, và sáu loại hành động mỗi loại đứng ở nấc nào. Dựng trên Progress, Badge, Tooltip. Không báo gì ra ngoài; chỉnh sửa là việc của form bên cạnh.
Playground
Đổi nấc hiện tại và trần để xem vạch tô và vạch mờ, và bật hover trên các chấm hành động để đọc tooltip.
Nấc hiện tại 1, trần 2.
import { AuthorityMeter } from "@nexobox/ui";
<AuthorityMeter
rungs={["Tập sự", "Chỉ soạn nháp", "Có giám sát", "Tự quyết"]}
current={1}
ceiling={2}
actions={[
{ id: "reply", label: "Trả lời", rung: 0 },
{ id: "discount", label: "Giảm giá", rung: 2, note: "Tối đa 10%" },
]}
variant="default"
aria-label="Thẩm quyền của Trợ lý bán hàng"
/>Bài toán
Chủ shop hỏi "nó được tự làm gì?" và nhận một từ như SUPERVISED thì không trả lời được. Thước này trả lời bằng hình: một vạch tới nấc hiện tại, một vạch mờ tới trần, và sáu chấm nhỏ cho sáu việc.
Khi nào sử dụng
Nên dùng
Header của Hồ sơ nhân viên; thẻ nhân viên trong lưới (biến thể compact, không có chấm hành động).
Khi nào không dùng
Tránh dùng
| Không dùng cho | Dùng thay |
|---|---|
| Chỉnh thẩm quyền | Form riêng cạnh thước |
| Hiển thị ngân sách | Progress thường với nhãn tiền |
Dựng từ
| Primitive tầng 1 | Vai trong composite |
|---|---|
| Badge | Từ của nấc hiện tại, variant neutral |
| Tooltip | Giải thích từng chấm hành động khi hover hoặc focus |
| Ghi chú triển khai |
|---|
Track bốn đoạn là div thuần trên token nền tảng, không bọc Progress: Progress chỉ tô một màu mỗi lần gọi, không diễn được vạch tô nấc hiện tại và vạch mờ tới trần trong cùng một thanh. |
Anatomy
| # | Phần | Ghi chú |
|---|---|---|
| 1 | Track | Bốn đoạn bằng nhau, cách nhau space-1, nền surface-subtle, bo radius-pill |
| 2 | Fill | Tới nấc hiện tại, màu brand-accent |
| 3 | Ceiling mark | Đoạn từ nấc hiện tại tới trần tô brand-soft; bằng trần thì không có đoạn mềm |
| 4 | Rung word | Badge neutral ghi từ chủ shop hiểu; mapping chuỗi → nấc sống trong app |
| 5 | Action pips | Một hàng duy nhất, mỗi hành động một ô theo đúng thứ tự trong actions; mỗi ô là một track thu nhỏ bốn đoạn cao 4px với riêng đoạn ở nấc của hành động đó tô màu, nhãn 11px canh giữa bên dưới |
Variants
| Variant | Hiển thị |
|---|---|
default | Đủ ba phần: track, rung word, action pips |
compact | Chỉ track và rung word, cao 20px, cho thẻ trong lưới |
States
| State | Hành vi | Trợ năng |
|---|---|---|
| Default | Như anatomy | role="meter", aria-valuemin=0, aria-valuemax=3, aria-valuenow=current, aria-valuetext = từ của nấc, trần trong aria-description |
| Hover chấm | Tooltip với nhãn hành động, nấc và note | Tooltip của Radix lo |
| Reduced motion | Không transition fill | — |
Bàn phím & trợ năng
Seam — host sở hữu gì
Composite không chỉnh thẩm quyền và không ánh xạ chuỗi nấc. Host truyền rungs đã dịch, giữ current/ceiling và danh sách actions.
API & triển khai
| Prop | Mặc định | Quy ước |
|---|---|---|
| rungs | — | Bắt buộc. Bốn nhãn, thấp → cao. |
| current | — | Bắt buộc. 0 | 1 | 2 | 3. |
| ceiling | — | Bắt buộc. >= current. |
| actions | undefined | Tối đa sáu hành động, mỗi cái có rung <= current. |
| variant | "default" | "default" | "compact". |
| aria-label | undefined | Tên của thước khi đứng một mình. |
Design tokens
--nf-semantic-brand-accent, --nf-semantic-brand-soft, --nf-semantic-surface-subtle (thay cho surface-sunken, chưa có trong token hiện tại), --nf-semantic-text-muted (thay cho foreground-muted), --nf-semantic-status-warning-icon (thay cho semantic-warning), --nf-foundation-radius-pill (thay cho radius-full), --nf-foundation-space-1, --nf-foundation-space-2, --nf-component-progress-track-height, --nf-component-focus-*.
Do / Don't
Nên dùng
Nấc dịch sang chữ chủ shop hiểu. Ceiling luôn >= current. Tối đa sáu hành động, mỗi hành động một chấm.
Tránh dùng
Chấm hành động ở nấc cao hơn current. Dùng thước này làm control chỉnh thẩm quyền. Tám, chín hành động chen vào bốn cột.