步骤条

steps

三态 finish / process / wait，连接线颜色跟随已完成步骤；横向与垂直共用同一 DOM，仅容器加 .steps--vertical。

示例

✓

注册账号

邮箱验证通过
✓

实名认证

审核已完成
3

填写资料

正在进行
4

完成

等待前序步骤

✓

创建项目

仓库初始化完成
2

配置流水线

正在编辑 .cnb.yml
3

部署上线

等待触发

<ol class="steps">
  <li class="step step--finish">
    <span class="step-line"></span>
    <span class="step-dot">✓</span>
    <div class="step-body">
      <div class="step-title">注册账号</div>
      <div class="step-desc">邮箱验证通过</div>
    </div>
  </li>
  <li class="step step--finish">
    <span class="step-line"></span>
    <span class="step-dot">✓</span>
    <div class="step-body">
      <div class="step-title">实名认证</div>
      <div class="step-desc">审核已完成</div>
    </div>
  </li>
  <li class="step step--process">
    <span class="step-line"></span>
    <span class="step-dot">3</span>
    <div class="step-body">
      <div class="step-title">填写资料</div>
      <div class="step-desc">正在进行</div>
    </div>
  </li>
  <li class="step step--wait">
    <span class="step-line"></span>
    <span class="step-dot">4</span>
    <div class="step-body">
      <div class="step-title">完成</div>
      <div class="step-desc">等待前序步骤</div>
    </div>
  </li>
</ol>
<ol class="steps steps--vertical" style="margin-top:20px">
  <li class="step step--finish">
    <span class="step-line"></span>
    <span class="step-dot">✓</span>
    <div class="step-body">
      <div class="step-title">创建项目</div>
      <div class="step-desc">仓库初始化完成</div>
    </div>
  </li>
  <li class="step step--process">
    <span class="step-line"></span>
    <span class="step-dot">2</span>
    <div class="step-body">
      <div class="step-title">配置流水线</div>
      <div class="step-desc">正在编辑 .cnb.yml</div>
    </div>
  </li>
  <li class="step step--wait">
    <span class="step-line"></span>
    <span class="step-dot">3</span>
    <div class="step-body">
      <div class="step-title">部署上线</div>
      <div class="step-desc">等待触发</div>
    </div>
  </li>
</ol>

安装

bun add @icen.ai/ui
import '@icen.ai/ui/components/steps.css';

用法

<ol class="steps">
  <li class="step step--finish">
    <span class="step-line"></span>
    <span class="step-dot">✓</span>
    <div class="step-body">
      <div class="step-title">已完成</div>
      <div class="step-desc">描述</div>
    </div>
  </li>
  <li class="step step--process">…</li>
  <li class="step step--wait">…</li>
</ol>