Steps 步骤条
v2.0.6+

步骤引导组件，纯 CSS 实现。支持横向/纵向、4 种状态（wait/process/finish/error）、主题色与简洁模式。

基础用法

  • Preview
  • Code
1
登录
完成账号登录
2
填写信息
完善个人资料
3
验证
邮箱/手机验证中
4
完成
注册成功
<div class="bny-steps">
    <div class="bny-step is-finish">
        <div class="bny-step-head">
            <div class="bny-step-icon"><span class="bny-step-num">1</span></div>
        </div>
        <div class="bny-step-content">
            <div class="bny-step-title">登录</div>
            <div class="bny-step-desc">完成账号登录</div>
        </div>
    </div>
    <div class="bny-step is-process">...</div>
    <div class="bny-step is-wait">...</div>
</div>

纵向

  • Preview
  • Code
1
提交申请
2026-07-20 10:32
2
主管审批
2026-07-21 14:18
3
财务复核
复核中...
4
完成
等待结果
<div class="bny-steps" direction="vertical">...</div>

错误状态 + 主题色

  • Preview
  • Code
1
步骤一
2
步骤二
审核失败
3
步骤三
<div class="bny-steps" color="blue">
    <div class="bny-step is-error">...</div>
</div>

API

CSS 类

类名/属性说明
bny-steps步骤条容器
direction="vertical"纵向布局
color="green/blue/red"主题色变体
model="simple"简洁模式（小尺寸）
bny-step单个步骤项
is-wait等待状态（灰色）
is-process进行中状态（主色实心）
is-finish完成状态（主色 + 对勾）
is-error错误状态（红色 + ×）