ICEN UI 设计系统
搜索组件… ⌘K

树形

与 behaviors/tree 配套：三层可折叠 + 叶子单选 + 禁用节点。

  • 素材库
    • 角色立绘
      • 主角·常服.png
      • 主角·礼服.png
    • 背景音乐
    • 未授权素材（禁用）
  • 剧本（默认折叠） 
<ul class="tree">  <li>    <div class="tree-node" style="--depth:0">      <button class="tree-toggle" type="button" aria-expanded="true" aria-label="折叠/展开"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg></button>      <span class="tree-label">素材库</span>    </div>    <ul>      <li>        <div class="tree-node" style="--depth:1">          <button class="tree-toggle" type="button" aria-expanded="true" aria-label="折叠/展开"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg></button>          <span class="tree-label">角色立绘</span>        </div>        <ul>          <li><div class="tree-node is-selected" style="--depth:2"><span class="tree-toggle" aria-hidden="true"></span><span class="tree-label">主角·常服.png</span></div></li>          <li><div class="tree-node" style="--depth:2"><span class="tree-toggle" aria-hidden="true"></span><span class="tree-label">主角·礼服.png</span></div></li>        </ul>      </li>      <li><div class="tree-node" style="--depth:1"><span class="tree-toggle" aria-hidden="true"></span><span class="tree-label">背景音乐</span></div></li>      <li><div class="tree-node is-disabled" style="--depth:1"><span class="tree-toggle" aria-hidden="true"></span><span class="tree-label">未授权素材（禁用）</span></div></li>    </ul>  </li>  <li>    <div class="tree-node" style="--depth:0">      <button class="tree-toggle is-collapsed" type="button" aria-expanded="false" aria-label="折叠/展开"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg></button>      <span class="tree-label">剧本（默认折叠）</span>    </div>    <ul hidden>      <li><div class="tree-node" style="--depth:1"><span class="tree-toggle" aria-hidden="true"></span><span class="tree-label">第一章.txt</span></div></li>      <li><div class="tree-node" style="--depth:1"><span class="tree-toggle" aria-hidden="true"></span><span class="tree-label">第二章.txt</span></div></li>    </ul>  </li></ul>

安装

bun add @icen.ai/ui

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

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

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

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 项目无此问题。

用法

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