Component / 069 / NEXOFRAME

TrustLadder

Mẫu chuẩn

Tin cậy theo từng loại việc: một danh sách gọn, mỗi dòng một loại việc với nấc hiện tại và bằng chứng. Bấm dòng để mở thang đầy đủ và trần của gói. Thu hồi một chạm; cho phép thêm phải bấm rõ và chỉ tới trần.

Composite tầng 2Dựng từ Badge, Button4 nấcKhông công tắc toàn cục

Playground

Chưa đổi quyền nào.

import { TrustLadder } from "@nexobox/ui";

<TrustLadder
  rungs={["Không làm", "Soạn nháp, bạn duyệt", "Tự làm, bạn xem lại sau", "Tự làm"]}
  classes={classes}
  onRungChange={(id, rung) => save(id, rung)}
/>

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

Không có nút bật tự động cho mọi thứ. Quyền mở rộng từng loại việc, dựa trên bằng chứng, do chủ shop quyết, và rút lại được trong một chạm.

Khi nào sử dụng

Nên dùng

Tab Quyền và tin cậy trong hồ sơ nhân viên; thẻ đề xuất nới quyền trên bảng điều khiển.

Khi nào không dùng

Tránh dùng

Không dùng cho	Dùng thay
Một thước tổng quát	AuthorityMeter
Công tắc bật tự động cho tất cả	Không dùng; mỗi loại việc một thang
Chỉnh quyền trong bước thoả thuận	Câu và công tắc trong trang thoả thuận

Dựng từ

Primitive	Vai trong composite
Badge	Nấc hiện tại bằng lời thường
Button	Thu hồi và Cho phép
Icon	Mũi tên mở rộng

Anatomy

#	Phần	Ghi chú
1	Dòng	Tên loại việc, badge nấc hiện tại (Chưa giao, Bạn duyệt trước, Linh tự làm bạn xem sau, Linh tự làm), một dòng bằng chứng, tối đa một hành động Thu hồi khi nấc chưa thấp nhất
2	Mở rộng	Bấm dòng mở tại chỗ, mỗi lần một dòng; thang dọc nấc cao nhất ở trên, chỉ nấc hiện tại được đánh dấu, đường nét đứt Trần của gói, chi tiết bằng chứng, tối đa ba ví dụ, Cho phép nấc trên
3	Đề xuất	Slot proposal của lớp việc được đưa lên đầu danh sách thành một dòng nổi bật, không lặp trong từng dòng

Variants

Variant	Hiển thị
`Nấc 0`	Badge Chưa giao, không có Thu hồi; mở rộng có Cho phép
`Giữa`	Có Thu hồi ở dòng; Cho phép trong phần mở rộng
`Ở trần`	Không có Cho phép; đường Trần của gói nằm ngay trên nấc cao nhất gói cho phép

States

State	Hành vi	Trợ năng
Default	Danh sách đóng hết	Mỗi dòng là nút aria-expanded, aria-controls
Mở rộng	Một dòng mở, dòng khác tự đóng; phần mở vào bằng opacity và transform, không animate chiều cao	Vùng có tên là tên loại việc
Đổi nấc	Host đổi rung; badge và đánh dấu nấc cập nhật	Nấc hiện tại aria-current
Trần	Đường nét đứt có chữ Trần của gói; nấc phía trên đường mờ hơn	Chữ, không chỉ màu
Reduced motion	Duration 0ms	—

Bàn phím & trợ năng

Tab tới từng dòng; Enter hoặc Space mở và đóng.

Thu hồi là nút riêng ở cuối dòng; Cho phép nằm trong phần mở và nêu rõ nấc đích.

Seam — host sở hữu gì

Composite không tự thăng hạng. Host nhận onRungChange, ghi lại, và với Thu hồi hiện toast Hoàn tác.

API & triển khai

Prop	Mặc định	Quy ước
rungs	—	Bốn tên nấc, thấp đến cao.
rungSummaries	tiếng Việt	Bốn câu ngắn cho badge, thấp đến cao.
classes	—	{ id, label, rung, ceiling, evidence, detail?, examples?, proposal? }; hiện tối đa ba ví dụ.
onRungChange	—	(classId, rung).
labels	tiếng Việt	demote, promote, ceiling, current, examples, expand.

Design tokens

--nf-semantic-brand-soft, --nf-semantic-brand-accent, --nf-semantic-border-control, --nf-component-card-*, --nf-foundation-motion-duration-fast, --nf-foundation-motion-easing-enter, --nf-foundation-space-*.

Do / Don't

Nên dùng

Hiện bằng chứng ngay trên dòng. Thu hồi ngay, không hộp xác nhận. Nêu rõ nấc sẽ đổi khi cho phép.

Tránh dùng

Một công tắc tự động toàn cục. Tự nới quyền. Bắt xác nhận khi thu hồi.