地址填完才解锁支付，回退保留已填内容。
用户先满足「地址完整」，才被允许前进——订单数据可信。
步骤条：随推进变化进度的物件
点上一步 / 下一步，看步骤条的当前态、已完成、连接线和进度条怎么变，下方面板内容也跟着切换。
0 / 3 步
当前步骤 · 第 1 步 / 共 3 步填写信息
收货人姓名（必填）与联系电话。
已是第一步，「上一步」不可用——这是步骤条的左边界。
原因：收货人姓名为空，「下一步」被锁。对照三态——已完成打勾、当前高亮、未到的灰色。先填写姓名再做下一步。
三态、前进门与回退
刚才在面板里看到的状态，归纳成三条规则。
- 三态互不相同：已完成（绿勾）、当前步（ink 高亮 + aria-current=step）、未到达（灰色）。颜色只加强，状态都有文字。
- 前进受完成条件约束：当前步的门没满足时，「下一步」被锁，并指出缺什么；不能靠视觉前进掩盖未完成。
- 回退保留上下文：点「上一步」或已完成节点回到前序步骤，已填内容不清空，改完可再次前进。
- 边界明确：第一步「上一步」禁用并说明；最后一步「下一步」变成「提交」；全部完成后步骤条进入终态。
什么时候用步骤条
看到下面这些信号再上步骤条；不是所有表单都需要。
- 适用：任务有明确的先后依赖，且总步数可控（3–6 步），如结账、开户、多段引导配置、复杂提交。
- 适用：用户会因「知道还剩几步」而安心完成的长表单，把一段大表单拆成可推进的节奏。
- 不适合：单步操作、可任意顺序填写的平行选项（用 tabs、checkbox 或分段表单更诚实）。
- 不适合：步数未知或随时可能新增的流程——假的「最后一步」比没有步骤条更误导。
怎么用好步骤条
从开始到获得判断的最短路径。
- 定义步骤与每步完成条件：先确定总步数、每步要填什么、什么算「完成」，再画界面。
- 渲染物件：序号 + 标题 + 连接线；当前步用 aria-current=step；已完成打勾；未到达灰色不可跳。
- 约束前进：「下一步」绑定当前步完成条件；没满足就禁用，并说明缺什么。
- 支持回退：「上一步」和已完成节点可点；回退不清空数据；末步提交后显示终态。
同一结账流程的正反例
目标都是「让用户顺利结账」；只改一处——是否允许跳过没填完的步骤。
能跳过没填的地址直接进入支付，回退还清空了内容。
步骤条成了装饰：地址没填却能前进，回退还丢了输入——产出无效订单。
快速自测
用户在「确认核对」步点了上一步，回到「填写信息」。正确的步骤条行为是？
继续查证
术语的技术定义和行为以这些一手或权威资料为准。
下一步学
和本知识点经常一起出现的概念。