组件

Steps 步骤条

步骤条：安装向导、发布流程等多步任务进度展示。

横排布局

填写信息
确认订单当前步骤
完成支付

<ol class="pvs-steps" style="max-width:36rem">
  <li class="pvs-steps__item pvs-steps__item--done">
    <span class="pvs-steps__label">填写信息</span>
  </li>
  <li class="pvs-steps__item pvs-steps__item--active">
    <span class="pvs-steps__label">确认订单</span>
    <span class="pvs-steps__hint">当前步骤</span>
  </li>
  <li class="pvs-steps__item">
    <span class="pvs-steps__label">完成支付</span>
  </li>
</ol>

垂直

pvs-steps--vertical 纵向排列，适合侧栏或窄屏。

环境检测已通过
数据库配置
创建管理员

<ol class="pvs-steps pvs-steps--vertical" style="max-width:16rem">
  <li class="pvs-steps__item pvs-steps__item--done">
    <div class="pvs-steps__body">
      <span class="pvs-steps__label">环境检测</span>
      <span class="pvs-steps__hint">已通过</span>
    </div>
  </li>
  <li class="pvs-steps__item pvs-steps__item--active">
    <div class="pvs-steps__body">
      <span class="pvs-steps__label">数据库配置</span>
    </div>
  </li>
  <li class="pvs-steps__item">
    <div class="pvs-steps__body">
      <span class="pvs-steps__label">创建管理员</span>
    </div>
  </li>
</ol>

类名速查

类名	说明
`pvs-steps`	ol 根
`pvs-steps__item`	单步
`pvs-steps__item--active / --done`	当前 / 已完成
`pvs-steps--vertical`	纵向布局