COMPONENT 08 · Navigation & Orientation

步骤进度条

Progress Stepper

也叫StepperStepsWizard Progress步骤条

显示多步骤流程的当前位置、已完成步骤与后续步骤。

Shows progress, completed stages, and upcoming stages in a multi-step flow.

ANATOMY & USAGE

结构与使用建议

组成部分

步骤指示器
步骤标签
连接线

适合使用

不建议使用

步骤可任意切换或流程只有一步时。

键盘与无障碍

当前步骤用 aria-current=step，状态文字可读，不能只用颜色或图标区分。

DESCRIBE IT TO AI

这样告诉编程助手

实现步骤进度条（Progress Stepper）：显示多步骤流程的当前位置、已完成步骤与后续步骤。

MINIMAL RUNNABLE CODE

可复制代码

原生与 React 两套实现，不依赖第三方组件库。

READ ONLY · SAFE TO COPY

<nav class="demo" aria-label="步骤进度条">
  <ol class="row">
    <li aria-current="step">
      <strong>1. 资料</strong>
    </li>
    <li>2. 确认</li>
    <li>3. 完成</li>
  </ol>
</nav>