富树形视图 - 自定义

了解如何自定义富树形视图组件。

基础

自定义图标

使用 collapseIcon 插槽、expandIcon 插槽和 defaultEndIcon 属性来自定义树形视图图标。下面的演示展示了如何使用现有的图标库（例如 Material Icons）以及使用 Material UI 的 SVG Icon component 从头开始创建图标来添加图标。

自定义切换动画

在 <TreeItem /> 上使用 groupTransition 插槽来传递一个处理动画的组件。

下面的演示使用 Material UI 的 Collapse 组件和 react-spring 库进行动画处理。

自定义样式

使用 treeItemClasses 定位 Tree Item 组件的内部元素并更改其样式。

自定义 Tree Item

您可以使用 Tree Item 的自定义 API 来构建新的布局和管理行为。了解更多关于 Tree Item 组件的结构以及 Tree Item 自定义文档 中提供的自定义实用程序。

无头 API

使用 useTreeItem2 Hook 创建您自己的组件。下面的演示展示了如何添加头像和自定义排版元素。

常见示例

文件资源管理器

下面的演示展示了许多以前的自定义示例，这些示例汇集在一起，使树形视图组件看起来与默认设计完全不同。

API

请参阅下面的文档，以获得此处提及的组件的所有可用 props 和 classes 的完整参考。

• <RichTreeView />
• <TreeItem />
• <TreeItem2 />