Tree
tree递归树 · 自研零依赖引擎 + WAI-ARIA tree(roving/方向键/typeahead) + checkable 父子级联半选 + 连接线 + 树内搜索 + grid-rows 高度过渡
用法
基础用法
单选高亮 + 方向键导航；defaultExpandedKeys 控制初始展开枝。
- 设计
- Tokens
- 主题
- 动效
- 组件
- 表单
- Input
- Select
- 反馈
- Alert
- Toast
- 文档
tsx
<Tree
nodes={nodes}
defaultExpandedKeys={["design", "components"]}
defaultSelectedKeys={["theme"]}
/>复选
checkable 开启父子级联勾选，半选自动呈 indeterminate。
- 设计
- Tokens
- 主题
- 动效
- 组件
- 表单
- Input
- Select
- 反馈
- Alert
- Toast
- 文档
tsx
<Tree
nodes={nodes}
checkable
defaultExpandedKeys={["design", "components", "form"]}
defaultCheckedKeys={["tokens"]}
/>连接线
showLine 显示层级连接线，结构层次更清晰。
- 设计
- Tokens
- 主题
- 动效
- 组件
- 表单
- Input
- Select
- 反馈
- Alert
- Toast
- 文档
tsx
<Tree nodes={nodes} showLine defaultExpandedKeys={["components", "form"]} />树内搜索
searchable 提供搜索框，命中节点高亮、祖先路径自动展开。
- 设计
- Tokens
- 主题
- 动效
- 组件
- 表单
- Input
- Select
- 反馈
- Alert
- Toast
- 文档
tsx
<Tree nodes={nodes} searchable searchPlaceholder="搜索组件" />何时用
展示并操作层级结构——文件目录、组织架构、分类导航、权限勾选树。扁平条目流用 List；只读 JSON 结构用 JsonViewer。本组件提供完整 WAI-ARIA tree 交互(方向键/typeahead)与 checkable 父子级联半选，适合需要键盘可达或勾选汇总的场景。
导入
ts
import { Tree, buildIndex, flattenVisible, getNodePath, toggleChecked, getCheckState, normalizeCheckedToLeaves, computeChecked, filterTree, type FlatRow, type TreeIndex, type CheckState } from "@hulianui/ui"Props
TreeProps：
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| nodes* | TreeNode[] | — | 树数据({ key, label, icon?, children?, disabled? }) |
| expandedKeys | string[] | — | 受控展开集 |
| defaultExpandedKeys | string[] | — | 非受控初始展开集 |
| selectable | boolean | true | 单选高亮(非 checkable 模式) |
| selectedKeys | string[] | — | 受控选中集 |
| defaultSelectedKeys | string[] | — | 非受控初始选中集 |
| checkable | boolean | false | 复选模式(行前 checkbox) |
| checkedKeys | string[] | — | 受控勾选集 |
| defaultCheckedKeys | string[] | — | 非受控初始勾选集 |
| showLine | boolean | false | 显示连接线 |
| searchable | boolean | false | 树内搜索框 |
| searchPlaceholder | string | — | 搜索框占位 |
| className | string | — | — |
| aria-label | string | — | 树的无障碍标签 |
Events
| 事件 | 类型 | 说明 |
|---|---|---|
| onExpandedChange | (keys: string[]) => void | 展开变化回调 |
| onSelect | (keys: string[], node: TreeNode) => void | 选中回调 |
| onCheck | (info: { checkedKeys: string[]; halfCheckedKeys: string[] }, node: TreeNode) => void | 勾选回调(含半选集) |
禁忌 / 坑
- 展开/选中/勾选三组状态各自受控/非受控对称：传
xxxKeys即受控(须配onXxx回写)，否则用defaultXxxKeys。混用同一组的受控与非受控会失效。 selectable默认true；checkable模式下走勾选，onCheck回调里checkedKeys与halfCheckedKeys分开返回，半选父节点不在checkedKeys里。nodes每项需稳定key；disabled节点不可选/不可勾。
相关
Table · Book3D · ProTable · PricingTable · JsonViewer · EditableTable
Playground
- 设计
- Tokens
- 主题
- 动效
- 组件
- 表单
- Input
- Select
- 反馈
- Alert
- Toast
- 文档
<Tree
nodes={nodes}
defaultExpandedKeys={["design", "components"]}
/>