簡易樹狀檢視 - 自訂

了解如何自訂簡易樹狀檢視元件。

基礎

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

在 Tree Item 上使用 groupTransition 插槽來傳遞處理動畫的元件。

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

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

您可以使用 Tree Item 的自訂 API 來建構新的版面配置和管理行為。

請在Tree Item 自訂頁面上深入了解 Tree Item 的結構和提供的自訂工具。

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

目標 treeItemClasses.groupTransition 類別以在樹狀檢視項目之間新增連接邊框。

Google 的 Gmail 側邊導覽可能是網路上最著名的樹狀檢視元件之一。以下範例示範如何複製它。

Gmail 側邊欄是樹狀檢視最知名的範例之一。以下範例示範如何使用樹狀檢視元件重新建立它

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