ICEN UI
ICEN UI 树形
Docs ⌘K
Core · 稳定

树形

树形列表：多层可折叠、叶子单选、禁用节点。

Preview
数据展示 tree
  • 素材库
    • 角色立绘
      • 主角·常服.png
      • 主角·礼服.png
    • 背景音乐
    • 未授权素材（禁用）
  • 剧本（默认折叠）
html
<ul class="icen-tree">  <li>    <div class="icen-tree-node" style="--depth:0">      <button class="icen-tree-toggle" type="button" aria-expanded="true" aria-label="折叠/展开"><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="M5.5 7.75 10 12.25l4.5-4.5"></path></svg></button>      <span class="icen-tree-label">素材库</span>    </div>    <ul>      <li>        <div class="icen-tree-node" style="--depth:1">          <button class="icen-tree-toggle" type="button" aria-expanded="true" aria-label="折叠/展开"><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="M5.5 7.75 10 12.25l4.5-4.5"></path></svg></button>          <span class="icen-tree-label">角色立绘</span>        </div>        <ul>          <li><div class="icen-tree-node is-selected" style="--depth:2"><span class="icen-tree-toggle" aria-hidden="true"></span><span class="icen-tree-label">主角·常服.png</span></div></li>          <li><div class="icen-tree-node" style="--depth:2"><span class="icen-tree-toggle" aria-hidden="true"></span><span class="icen-tree-label">主角·礼服.png</span></div></li>        </ul>      </li>      <li><div class="icen-tree-node" style="--depth:1"><span class="icen-tree-toggle" aria-hidden="true"></span><span class="icen-tree-label">背景音乐</span></div></li>      <li><div class="icen-tree-node is-disabled" style="--depth:1"><span class="icen-tree-toggle" aria-hidden="true"></span><span class="icen-tree-label">未授权素材（禁用）</span></div></li>    </ul>  </li>  <li>    <div class="icen-tree-node" style="--depth:0">      <button class="icen-tree-toggle is-collapsed" type="button" aria-expanded="false" aria-label="折叠/展开"><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="M5.5 7.75 10 12.25l4.5-4.5"></path></svg></button>      <span class="icen-tree-label">剧本（默认折叠）</span>    </div>    <ul hidden>      <li><div class="icen-tree-node" style="--depth:1"><span class="icen-tree-toggle" aria-hidden="true"></span><span class="icen-tree-label">第一章.txt</span></div></li>      <li><div class="icen-tree-node" style="--depth:1"><span class="icen-tree-toggle" aria-hidden="true"></span><span class="icen-tree-label">第二章.txt</span></div></li>    </ul>  </li></ul>

特性

接口

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

安装

bun add @icen.ai/ui

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

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

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

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

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

用法

js
import { initTree } from '@icen.ai/ui/behaviors/tree';initTree();// toggle 折叠/展开子 ul；点击叶子节点单选（.is-selected）