豐富樹狀檢視 - 自訂

了解如何自訂豐富樹狀檢視元件。

基本

使用 collapseIcon 插槽、expandIcon 插槽和 defaultEndIcon 屬性來自訂樹狀檢視圖示。以下示範如何使用現有的圖示庫（例如 Material Icons）以及使用 Material UI 的 SVG Icon 元件從頭開始建立圖示。

在 <TreeItem /> 上使用 groupTransition 插槽來傳遞處理動畫的元件。

以下示範使用 Material UI 的 Collapse 元件以及 react-spring 函式庫進行動畫處理。

使用 treeItemClasses 來鎖定 Tree Item 元件的內部元素並變更其樣式。

<RichTreeView
  defaultExpandedItems={['grid']}
  slots={{ item: CustomTreeItem }}
  items={MUI_X_PRODUCTS}
/>

<RichTreeView
  defaultExpandedItems={['grid']}
  slots={{ item: CustomTreeItem }}
  items={MUI_X_PRODUCTS}
/>

按下 Enter 開始編輯

您可以使用 Tree Item 的自訂 API 來建立新的版面配置並管理行為。在 Tree Item 自訂文件中深入了解 Tree Item 元件的結構以及提供的自訂工具。

使用 useTreeItem2 Hook 來建立您自己的元件。以下示範如何新增頭像和自訂排版元素。

以下示範展示了許多先前的自訂範例，這些範例結合在一起使樹狀檢視元件看起來與其預設設計完全不同。

請參閱以下文件，以取得此處提及的元件可用的所有屬性和類別的完整參考。