如何使用

  • 树用于多层级数据的结构化展示,例如显示文件夹与文件的列表、显示组织架构成员列表等等。
  • 树可以作为选择器来选择多级数据,也可以作为多级导航。

解构

类型
  1. 展开小三角 :表示该节点包含子级节点,用户通过点击此图标来展开/折叠该节点的子节点。
  2. Checkbox 当树需要多选操作时,可以使用 Checkbox。不同节点之间的 Checkbox 可能存在关系。父节点的 Checkbox 选中状态受子级节点影响。若不需要多选操作,可不显示 Checkbox。
  3. 文本 普通文本,如有需要,可在文本前放置图标。
  4. 父级节点 父级节点带有一个“展开小三角”。
  5. 子级节点 子级节点较父级节点有锁进。

组件 Demo

✅ ️ Figma Variants

常规型

带图标的

目录树模式

目录树模式下自带目录图标,多用于文档结构