← 所有版型

步骤轨道 <StepTrack />

3–5 个节点串在一条轨道上,最后一步为强调色终点。每步可附一条命令(深色)或配置行(浅色),下方可接“之后”命令条。

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

分組
操作 · 有序流程
元件
StepTrack · #step-track
互動
轨道从左向右画出,节点依次出现,轨道止于最后一个节点。

適合

  • 必须按顺序执行的流程:升级、部署、入职
  • 每步都有明确的动作

不適合

  • 步骤无先后:用 NumberedColumns
  • 超过 5 步:合并步骤或拆页

內容上限

1steps 3–5 步
2title ≤ 8 字;body ≤ 40 字(两行内)
3cmd ≤ 30 个字符
4after.cmds 2–5 条

欄位

欄位型別
kicker · 必填string标题上方的小节名,2–8 字
title · 必填string | string[]页面标题;传数组可手动断行,每项一行
leadstring一到两句导语,≤ 60 字
sourcestring事实出处;页面上有任何数据或事实时必填
hintReactNode页眉中间的操作提示,可用 <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'] }}
/>