UI · №06 · SPECIMEN

步骤条Stepper

第1步第2步那种进度条分步引导结账那种一步一步走的

LIVE SPECIMEN真的能玩，点点看

先看结论

编号圆点连成线的分步流程：已完成打勾可回退，当前高亮，未来步骤禁用。

适合: 注册、结账、配置向导——必须按顺序完成的多步流程。
不适合: 各步独立无依赖——那是 Tabs 的场景。

直接发给 agent

Add a stepper for the 3-step checkout: numbered circles connected by lines, completed steps show a check and are clickable to go back, the current step is highlighted, future steps are disabled.

已于 2026-07-17 实测通过

技术标注2 项

web: 有序列表 + aria-current="step"
react: <Steps>/<Stepper>（各组件库）

详细说明

步骤条的价值是「预期管理」：告诉用户一共几步、走到哪了、还剩多少。它和 Tabs 的分水岭是依赖关系——有先后就 Stepper，没先后就 Tabs。