files() 渲染文件树：目录行带旋转 chevron 切换， 文件夹图标随开关状态切换，子行落在缩进线上（lines: false 隐藏）。

简单树

目录 + 文件

src

src

lib

ui

lib

tokens.ts

components.ts

files(
  folder(fileRow('src') + fileRow('lib') + fileRow('ui'), { name: 'src' }) +
    folder(fileRow('tokens.ts') + fileRow('components.ts'), { name: 'lib' }),
);

默认展开

defaultOpen 目录

styles

styles

celestial-docs.css

scripts

build.ts

files(
  folder(fileRow('styles') + fileRow('celestial-docs.css'), { name: 'styles', defaultOpen: true }) +
    folder(fileRow('build.ts'), { name: 'scripts' }),
);

无缩进线

lines: false

网站改版

首页

关于

README.md

files(
  folder(fileRow('首页') + fileRow('关于'), { name: '网站改版', defaultOpen: true }) +
    fileRow('README.md'),
  { lines: false },
);

自定义图标

自定义文件图标

package.json

README.md

files(
  fileRow('package.json', '<svg …>…</svg>') + // 任意内联 SVG 字符串
    fileRow('README.md'),
);

API

函数	签名	说明
file(name, icon?)	(string, string?) => string	文件行（可传自定义 SVG 图标）。
folder(children, { name, defaultOpen?, icon?, openIcon? })	—	可折叠目录行；打开时图标切换为 openIcon。
files(children, { lines? })	—	树容器；lines: false 隐藏缩进线。

注意

• 目录行是由运行时接线的按钮（data-cpd-folder-toggle），不是原生 <details>。
• folder() 接收预构建 HTML 作为子内容；可自由嵌套更深层级。