For AI agents: the complete documentation index is available at https://a3s-lab.github.io/UI/llms.txt, the full documentation bundle is available at https://a3s-lab.github.io/UI/llms-full.txt, and this page is available as Markdown at https://a3s-lab.github.io/UI/components/stepper.md.
A3S UI
  • 简体中文
  • next

      • 步骤条

      步骤条用于展示设置、收敛、发布等顺序明确且范围有限的流程。当时间和事件历史才是主要信息时，应使用时间线。

      实时预览

      1. 期望状态

        已提交

      2. Runtime 应用

        已完成

      3. 健康证明

        正在验证

      4. 边缘路由

        等待中

      用法

      使用原生有序列表，并为每个阶段保留文字标签。

      <ol class="stepper" aria-label="发布进度" tabindex="0">
  <li data-state="success">
    <span data-step-marker aria-hidden="true">1</span>
    <section>
      <h3>构建</h3>
      <p>已完成</p>
    </section>
  </li>
  <li data-state="active" aria-current="step">
    <span data-step-marker aria-hidden="true">2</span>
    <section>
      <h3>发布</h3>
      <p>进行中</p>
    </section>
  </li>
</ol>

      参数

      API取值用途
      class="stepper"必填有序流程根元素
      data-step-marker必填数字、短代码或图标标记
      data-stateactive、success、warning、danger语义化阶段状态
      aria-currentstep标识当前阶段
      tabindex0让溢出的横向序列可通过键盘滚动
      data-orientationvertical垂直排列阶段与连接线
      --stepper-minCSS 长度水平阶段的最小宽度
      --stepper-marker-sizeCSS 长度标记直径

      状态与变体

      默认水平布局在序列超出容器时可以横向滚动。狭窄窗格或阶段说明较长时使用 data-orientation="vertical"。等待中的中性阶段不设置 data-state；警告和危险状态只用于真实流程条件。

      可访问性

      为有序列表提供名称，并用文字表达每个阶段的名称和状态。只给一个当前阶段设置 aria-current="step"。横向序列可能溢出时添加 tabindex="0"，让键盘用户可以滚动；A3S 样式会提供清晰的焦点环。列表本身已经表达顺序，因此装饰性的数字或图标标记可以对辅助技术隐藏。不要只依赖连接线或标记颜色传达状态。