Tree 树
有层级的列表:文件目录、组织架构、文档大纲。层级不超过一层时用 List 或 Nav 就够了。
基本用法
传一棵 TreeNode。点一行会选中它;有子级的节点同时展开或收起。disabled 的节点不能选中,键盘移动时会跳过。
- src
- components
- Button.tsx
- Dialog.tsx
- Legacy.tsx(只读)
- styles
- index.ts
- package.json
- README.md
图标
节点可以带图标,放在箭头和文字之间。
- 指南
- 快速开始
- 主题
- 更新记录
受控
展开和选中各自支持受控与非受控。onSelect 的参数是节点 id。
- src
- components
- styles
- index.ts
- package.json
- README.md
接口
Tree
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
items* | TreeNode[] | — | 树的数据。 |
expanded / defaultExpanded | string[] | [] | 展开的节点 id,受控 / 非受控。 |
onExpandedChange | (ids: string[]) => void | — | 展开状态变化时。 |
selected / defaultSelected | string | null | null | 选中的节点 id;null 表示没有选中。 |
onSelect | (id: string | null) => void | — | 选中变化时。 |
label | string | — | 树的名字(aria-label)。 |
TreeNode
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
id* | string | — | 唯一标识。 |
label* | ReactNode | — | 节点文字。 |
icon | ReactNode | — | 文字前的图标。 |
children | TreeNode[] | — | 子节点;有子节点的才能展开。 |
disabled | boolean | — | 禁用:不能选中,键盘移动时跳过。 |
无障碍
- 容器是
role="tree",节点是treeitem,子级包在role="group"里;每个节点带aria-level、aria-setsize、aria-posinset,读屏能报出“第 2 层,3 项中的第 1 项”。 - 整棵树只有一个 Tab 停靠点(roving tabindex)。↑ ↓ 在可见节点间移动,Home End 到首尾。
- → 展开收起的节点,已展开则进入第一个子节点;← 收起展开的节点,已收起(或是叶子)则回到父节点。
- Enter 或 Space 选中当前节点,有子级时同时切换展开。
- 展开状态在
aria-expanded,选中在aria-selected,禁用在aria-disabled;箭头和图标对读屏隐藏。