Bỏ qua tới nội dung
Component / 065 / NEXOFRAME

SetupChecklist

Mẫu chuẩn

Danh sách có thứ tự những thứ phải sẵn sàng trước khi bắt đầu: mỗi hàng có trạng thái, nhãn, một dòng tình trạng và một liên kết hành động. Hàng đã xong gọn thành một dòng có dấu tick.

Composite tầng 2Dựng từ Button4 trạng thái hàngopacity, transform, width

Playground

LIVE PREVIEW

Chuẩn bị cho Linh

Đã xong 1/4

  1. Đã xong: Kênh bán hàng

  2. Việc tiếp theo: Nguồn thông tin sản phẩm

    Chưa có danh mục hoặc bảng giá

  3. Chưa làm: Người quản lý

    Chưa chọn ai chịu trách nhiệm

  4. Chưa làm: Thử nghiệm

    Linh chưa được thử với câu hỏi mẫu

Xong 1/4

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

<SetupChecklist
  title="Chuẩn bị cho Linh"
  items={[
    { id: "channel", label: "Kênh bán hàng", state: "Chưa kết nối kênh nào", status: "current",
      action: { label: "Kết nối kênh", href: "/hire?step=2" } },
    // …
  ]}
  onAllComplete={removeChecklist}
/>

Bài toán

Người mới vào một workspace trống cần biết còn thiếu gì và bấm đâu để làm tiếp. Checklist chính là hướng dẫn, không cần tour chắn màn hình; mỗi hàng đưa thẳng tới đúng bước hoàn tất nó.

Khi nào sử dụng

Nên dùng

Màn hình đầu tiên khi chưa có nhân viên, trang tổng quan khi một kết nối bị mất, mọi nơi một chuỗi điều kiện sẵn sàng cần hiện ra.

Khi nào không dùng

Tránh dùng

Không dùng choDùng thay
Các bước của một form nhiều trangStepIndicator
Danh sách việc cần làm hằng ngàyActivityList hoặc hàng ReasonRemedyRow
Tour hướng dẫn chắn màn hìnhKhông dùng; dùng chính checklist

Dựng từ

PrimitiveVai trong composite
ButtonLiên kết hành động ở cuối hàng (ghost, sm)
IconDấu tick, cảnh báo, vòng rỗng

Anatomy

#PhầnGhi chú
1Tiêu đề + dòng tiến độDòng "Đã xong n/N" aria-live polite
2Thanh tiến độMột vạch width chuyển trong duration-standard; role progressbar
3Hàng đang làmDấu hiệu, nhãn, một dòng tình trạng, một hành động
4Hàng đã xongGọn một dòng có tick; tick vào bằng opacity và scale 0.9 sang 1
5Hàng cảnh báoHàng từng xong rồi mất (ví dụ kết nối); mở rộng lại với icon cảnh báo

Variants

VariantHiển thị
doneMột dòng, tick thành công, chữ phụ
currentVòng brand; việc tiếp theo
todoVòng trung tính
warningIcon cảnh báo, dòng tình trạng màu cảnh báo, nút Kết nối lại

States

StateHành viTrợ năng
Mặc địnhNhư anatomyDanh sách ol; mỗi hàng có từ trạng thái sr-only
Một hàng xongTick vào, thanh tiến độ tăng widthDòng tiến độ được đọc polite
Tất cả xongDanh sách mờ dần opacity rồi gọi onAllComplete để host gỡ; không sập chiều cao—
Reduced motionDuration 0ms, không có transitionend nên callback chạy từ effect—

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

Mỗi hành động là liên kết thật khi có href, hoặc nút khi chỉ có onClick; Tab theo thứ tự hàng.
Trạng thái nói bằng chữ sr-only và icon, không chỉ bằng màu.
Hàng đã xong không có điều khiển nên không chiếm tab stop.

Seam — host sở hữu gì

Composite không biết một hàng xong khi nào. Host truyền status từ dữ liệu thật và gỡ danh sách khi onAllComplete gọi.

API & triển khai

PropMặc địnhQuy ước
items—Mỗi hàng: id, label, state, status, action?.
titleundefinedTiêu đề danh sách.
progressLabel"Đã xong n/N"Hàm tạo dòng tiến độ.
onAllCompleteundefinedGọi một lần sau khi mờ hết, để host gỡ.
statusLabelstiếng ViệtTừ đọc cho từng status.

Design tokens

--nf-semantic-brand-accent, --nf-semantic-surface-subtle, --nf-semantic-border-divider, --nf-component-progress-track-height, --nf-foundation-motion-duration-fast, -standard, --nf-foundation-motion-easing-enter, -exit-snappy, --nf-foundation-space-*.

Do / Don't

Nên dùng

Mỗi hành động dẫn thẳng tới bước hoàn tất hàng đó. Một dòng tình trạng ngắn. Hàng mất kết nối quay lại cảnh báo thay vì im lặng.

Tránh dùng

Một hàng nhiều hành động. Sập chiều cao bằng animation height. Giữ checklist sau khi mọi thứ đã xong.