- 分组
- 操作 · 有序流程
- 组件
StepTrack·#step-track- 交互
- 轨道从左向右画出,节点依次出现,轨道止于最后一个节点。
适合
- 必须按顺序执行的流程:升级、部署、入职
- 每步都有明确的动作
不适合
- 步骤无先后:用 NumberedColumns
- 超过 5 步:合并步骤或拆页
内容上限
| 1 | steps 3–5 步 |
| 2 | title ≤ 8 字;body ≤ 40 字(两行内) |
| 3 | cmd ≤ 30 个字符 |
| 4 | after.cmds 2–5 条 |
字段
| 字段 | 类型 | |
|---|---|---|
kicker · 必填 | string | 标题上方的小节名,2–8 字 |
title · 必填 | string | string[] | 页面标题;传数组可手动断行,每项一行 |
lead | string | 一到两句导语,≤ 60 字 |
source | string | 事实出处;页面上有任何数据或事实时必填 |
hint | ReactNode | 页眉中间的操作提示,可用 <kbd> |
steps · 必填 | { title, body, cmd?, config? }[] | config: true 时 cmd 显示为浅色配置行,没有 # 提示符 |
after | { label, cmds[] } | 流程后的收尾命令条 |
示例代码
<StepTrack
kicker="升级步骤"
title="四步完成升级"
steps={[
{ title: '改写软件源', body: '把 birch 改为 aurora。', cmd: 'Suites: aurora aurora-updates', config: true },
{ title: '刷新索引', body: '确认没有旧源。', cmd: 'apt update' },
{ title: '完整升级', body: '完成后重启。', cmd: 'apt full-upgrade' },
]}
after={{ label: '重启之后', cmds: ['apt autoremove'] }}
/>