← 所有版型

可勾选清单 <Checklist />

两列可点击的检查项,每项含标题、一条命令和原因。右上角的大计数随勾选实时变化,适合现场带读。

版型與風格的說明目前僅提供簡體中文。

分組
操作 · 准备工作
元件
Checklist · #checklist
互動
点击条目勾选,对勾以描边动画画出;勾选不会触发翻页(Space 在按钮上被保留)。

適合

  • 上线前检查、升级前准备、验收标准
  • 每项都能给出一条具体命令或动作

不適合

  • 项之间有严格顺序:用 StepTrack
  • 只是罗列特性:用 NumberedColumns

內容上限

1items 6 或 8 项(两列等高);4 项时页面下半会空
2title ≤ 18 字
3cmd ≤ 56 个字符;每项都尽量给出 cmd,没有 cmd 的项会比相邻项矮
4note ≤ 30 字

欄位

欄位型別
kicker · 必填string小节名
title · 必填string | string[]标题
items · 必填{ title, cmd?, note }[]检查项
countLabelstring计数后的文字,默认“已确认”
hintReactNode默认“点击条目可以逐项勾选”
sourcestring出处

範例程式碼

<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"
/>