COMPONENT 70 · Data Display

树形视图

Tree View

也叫TreeOutline ViewFolder TreeNSOutlineView

以可展开节点呈现文件夹、目录等层级数据。

Presents hierarchical data as expandable parent and child nodes.

ANATOMY & USAGE

结构与使用建议

组成部分

根容器
父节点
子节点组

适合使用

用户需要浏览和操作深层级对象时。

不建议使用

层级很浅、内容主要用于页面导航或移动端空间有限时。

键盘与无障碍

实现 tree/treeitem/group 语义、方向键展开与移动、aria-level/expanded/selected。

DESCRIBE IT TO AI

这样告诉编程助手

实现树形视图（Tree View）：以可展开节点呈现文件夹、目录等层级数据。

MINIMAL RUNNABLE CODE

可复制代码

原生与 React 两套实现，不依赖第三方组件库。

READ ONLY · SAFE TO COPY

<ul class="demo" role="tree" aria-label="文件">
  <li role="none">
    <button id="tree-root" role="treeitem" aria-expanded="true" aria-selected="true" tabindex="0">组件</button>
    <ul role="group">
      <li role="none">
        <button role="treeitem" aria-selected="false" tabindex="-1">Button.tsx</button>
      </li>
      <li role="none">
        <button role="treeitem" aria-selected="false" tabindex="-1">Slider.tsx</button>
      </li>
    </ul>
  </li>
</ul>