ICEN UI
ICEN UI 步骤条
Docs ⌘K
Core · 稳定

步骤条

步骤条：多阶段流程的进度导航，横向与垂直同一 DOM。

Preview
导航 steps
  1. 注册账号
    邮箱验证通过
  2. 实名认证
    审核已完成
  3. 3
    填写资料
    正在进行
  4. 4
    完成
    等待前序步骤
  1. 创建项目
    仓库初始化完成
  2. 2
    配置流水线
    正在编辑 .cnb.yml
  3. 3
    部署上线
    等待触发
html
<ol class="icen-steps">  <li class="icen-step icen-step--finish">    <span class="icen-step-line"></span>    <span class="icen-step-dot"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" focusable="false" class="icen-symbol" aria-hidden="true"><path d="M4.5 10.2l3.6 3.6 7.4-7.6"></path></svg></span>    <div class="icen-step-body">      <div class="icen-step-title">注册账号</div>      <div class="icen-step-desc">邮箱验证通过</div>    </div>  </li>  <li class="icen-step icen-step--finish">    <span class="icen-step-line"></span>    <span class="icen-step-dot"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" focusable="false" class="icen-symbol" aria-hidden="true"><path d="M4.5 10.2l3.6 3.6 7.4-7.6"></path></svg></span>    <div class="icen-step-body">      <div class="icen-step-title">实名认证</div>      <div class="icen-step-desc">审核已完成</div>    </div>  </li>  <li class="icen-step icen-step--process">    <span class="icen-step-line"></span>    <span class="icen-step-dot">3</span>    <div class="icen-step-body">      <div class="icen-step-title">填写资料</div>      <div class="icen-step-desc">正在进行</div>    </div>  </li>  <li class="icen-step icen-step--wait">    <span class="icen-step-line"></span>    <span class="icen-step-dot">4</span>    <div class="icen-step-body">      <div class="icen-step-title">完成</div>      <div class="icen-step-desc">等待前序步骤</div>    </div>  </li></ol><ol class="icen-steps icen-steps--vertical" style="margin-top:20px">  <li class="icen-step icen-step--finish">    <span class="icen-step-line"></span>    <span class="icen-step-dot"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" focusable="false" class="icen-symbol" aria-hidden="true"><path d="M4.5 10.2l3.6 3.6 7.4-7.6"></path></svg></span>    <div class="icen-step-body">      <div class="icen-step-title">创建项目</div>      <div class="icen-step-desc">仓库初始化完成</div>    </div>  </li>  <li class="icen-step icen-step--process">    <span class="icen-step-line"></span>    <span class="icen-step-dot">2</span>    <div class="icen-step-body">      <div class="icen-step-title">配置流水线</div>      <div class="icen-step-desc">正在编辑 .cnb.yml</div>    </div>  </li>  <li class="icen-step icen-step--wait">    <span class="icen-step-line"></span>    <span class="icen-step-dot">3</span>    <div class="icen-step-body">      <div class="icen-step-title">部署上线</div>      <div class="icen-step-desc">等待触发</div>    </div>  </li></ol>

特性

接口

初始化
initSteps()（kit 一行入口可直接命名导入）
导出
initSteps 共享行为模块，清单含族内导出
事件
icen:check-changeicen:page-changeicen:rating-changeicen:segmented-changeicen:sort-changeicen:step-changeicen:stepper-changeicen:switch-change detail 契约见 IcenEventMap；共享行为模块，清单含族内事件
类型
dist/behaviors/controls.d.mts（随 npm 包发布，含全部 JSDoc 约束）

安装

bun add @icen.ai/ui

一行引入该组件（CSS 与 behavior 自动带上，无需关心内部 CSS 文件名）：

js
import '@icen.ai/ui/kit/steps';import { initSteps } from '@icen.ai/ui';initSteps();

也可以用脚手架直接打印引入行：

bash
bunx --bun @icen.ai/ui add steps

Astro 项目注意：kit 入口里的 CSS import 在页面 <script> 里会被 Astro 的 client bundle 摇掉——请改在布局 frontmatter 里引 CSS（import '@icen.ai/ui/components/steps.css';），JS 行为仍可走 kit。Vite SPA / webpack 项目无此问题。

用法

html
<ol class="icen-steps">  <li class="icen-step icen-step--finish">    <span class="icen-step-line"></span>    <span class="icen-step-dot"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" focusable="false" class="icen-symbol" aria-hidden="true"><path d="M4.5 10.2l3.6 3.6 7.4-7.6"></path></svg></span>    <div class="icen-step-body">      <div class="icen-step-title">已完成</div>      <div class="icen-step-desc">描述</div>    </div>  </li>  <li class="icen-step icen-step--process">…</li>  <li class="icen-step icen-step--wait">…</li></ol>