- 分组
- 操作 · 准备工作
- 组件
Checklist·#checklist- 交互
- 点击条目勾选,对勾以描边动画画出;勾选不会触发翻页(Space 在按钮上被保留)。
适合
- 上线前检查、升级前准备、验收标准
- 每项都能给出一条具体命令或动作
不适合
- 项之间有严格顺序:用 StepTrack
- 只是罗列特性:用 NumberedColumns
内容上限
| 1 | items 6 或 8 项(两列等高);4 项时页面下半会空 |
| 2 | title ≤ 18 字 |
| 3 | cmd ≤ 56 个字符;每项都尽量给出 cmd,没有 cmd 的项会比相邻项矮 |
| 4 | note ≤ 30 字 |
字段
| 字段 | 类型 | |
|---|---|---|
kicker · 必填 | string | 小节名 |
title · 必填 | string | string[] | 标题 |
items · 必填 | { title, cmd?, note }[] | 检查项 |
countLabel | string | 计数后的文字,默认“已确认” |
hint | ReactNode | 默认“点击条目可以逐项勾选” |
source | string | 出处 |
示例代码
<Checklist
kicker="升级前"
title="先回到“纯净”的 Lumen 12"
items={[
{ title: '备份关键数据', cmd: "dpkg --get-selections '*' > ~/curr-pkgs.txt", note: '另存 /etc 与 /var/lib/dpkg' },
{ title: '检查软件包状态', cmd: 'dpkg --audit && apt-mark showhold', note: '解除会阻塞核心包的 hold' },
]}
source="aurora 发行说明 §4.1 – §4.4"
/>