ICEN UI
ICEN UI 侧栏
Docs ⌘K
Core · 稳定

侧栏

分组可折叠的侧栏导航：条目带图标与当前态。

Preview
导航 sidebar
html
<aside class="icen-sidebar">  <div class="icen-sidebar-group is-open">    <button class="icen-sidebar-group-title" aria-expanded="true">快速开始</button>    <div class="icen-sidebar-group-panel"><div class="icen-sidebar-group-panel-inner">      <a class="icen-sidebar-item" href="#">        <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 icen-sidebar-item-icon" aria-hidden="true"><path d="M6 2.5h5.5L16 7v9.5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-12a2 2 0 0 1 2-2ZM11.5 2.5V7H16"></path></svg>        <span>安装</span>      </a>      <a class="icen-sidebar-item is-active" href="#">        <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 icen-sidebar-item-icon" aria-hidden="true"><path d="M10 2.5c2 1.5 3.2 4 3.2 6.8 0 1.5-.3 2.9-.8 4.2H7.6c-.5-1.3-.8-2.7-.8-4.2 0-2.8 1.2-5.3 3.2-6.8ZM10 8.6a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM7.6 12.5 5.6 15.4c-.9.3-1.6 1-2 2M12.4 12.5l2 2.9c.9.3 1.6 1 2 2M8.7 13.8c0 1.8.5 3.1 1.3 4.2.8-1.1 1.3-2.4 1.3-4.2"></path></svg>        <span>快速上手</span>      </a>    </div></div>  </div>  <div class="icen-sidebar-group">    <button class="icen-sidebar-group-title" aria-expanded="false">进阶指南</button>    <div class="icen-sidebar-group-panel"><div class="icen-sidebar-group-panel-inner">      <a class="icen-sidebar-item" href="#">        <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 icen-sidebar-item-icon" aria-hidden="true"><path d="M6 2.5h5.5L16 7v9.5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-12a2 2 0 0 1 2-2ZM11.5 2.5V7H16"></path></svg>        <span>更新日志</span>      </a>    </div></div>  </div></aside>

特性

接口

初始化
initSidebar()（kit 一行入口可直接命名导入）
导出
initSidebar
事件
icen:sidebar-collapseicen:sidebar-toggle detail 契约见 IcenEventMap
类型
dist/behaviors/sidebar.d.mts（随 npm 包发布，含全部 JSDoc 约束）

安装

bun add @icen.ai/ui

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

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

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

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

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

用法

js
import { initSidebar } from '@icen.ai/ui/behaviors/sidebar';initSidebar(); // 点击 .sidebar-group-title 切父 group 的 .is-open + aria-expanded