跳到內容

TreeItemAPI

React TreeItem 元件的 API 參考文件。瞭解此匯出模組的 props、CSS 和其他 API。

示範

匯入

import { TreeItem } from '@mui/x-tree-view/TreeItem';
// or
import { TreeItem } from '@mui/x-tree-view';
// or
import { TreeItem } from '@mui/x-tree-view-pro';

透過閱讀此關於最小化套件大小的指南，瞭解差異。

Props

原生元件的 Props 也可用。

名稱類型預設值描述
itemId*string-

項目的 ID。

childrennode-

元件的內容。

classesobject-

覆寫或擴充套用至元件的樣式。

請參閱下方CSS 類別 API 以取得更多詳細資訊。

ContentComponent元素類型TreeItemContent

用於呈現項目內容的元件。

ContentPropsobject-

套用至 ContentComponent 的 Props。

disabledboolfalse

若為 true，則項目會停用。

labelnode-

樹狀項目標籤。

onFocusunsupportedProp-

不支援此 prop。如果您需要監控項目的焦點，請在樹狀結構上使用 onItemFocus 回呼。

onKeyDownfunc-

當在項目上按下鍵盤按鍵時觸發的回呼。

slotPropsobject{}

用於每個元件 Slot 的 props。

slotsobject{}

可覆寫的元件 Slot。

請參閱下方Slots API 以取得更多詳細資訊。

sxArray<func
| object
| bool>
| func
| object		-

系統 prop，允許定義系統覆寫以及額外的 CSS 樣式。

請參閱 `sx` 頁面 以取得更多詳細資訊。

ref 會轉發到根元素。

主題預設 props

您可以使用 MuiTreeItem 透過主題變更此元件的預設 props。

Slots

Slot 名稱類別名稱預設元件描述
collapseIcon用於摺疊項目的圖示。
expandIcon用於展開項目的圖示。
endIcon顯示在結束項目旁邊的圖示。
icon要顯示在樹狀項目標籤旁邊的圖示。
groupTransition.MuiTreeItem-groupTransitionTreeItem2Group動畫顯示/消失項目子項的元件。

CSS 類別

這些類別名稱對於使用 CSS 設定樣式很有用。當觸發特定狀態時，它們會套用至元件的 Slot。

類別名稱規則名稱描述
.Mui-disabled停用時套用至元素的狀態類別。
.Mui-expanded展開時套用至內容元素的狀態類別。
.Mui-focused焦點在內容元素上時套用的狀態類別。
.Mui-selected選取內容元素時套用的狀態類別。
.MuiTreeItem-checkboxcheckbox套用至核取方塊元素的樣式。
.MuiTreeItem-contentcontent套用至內容元素的樣式。
.MuiTreeItem-dragAndDropOverlaydragAndDropOverlay套用至拖放覆蓋層的樣式。
.MuiTreeItem-editableeditable套用至可編輯項目內容的樣式。
.MuiTreeItem-editingediting啟用編輯時套用至內容元素的樣式。
.MuiTreeItem-iconContainericonContainer套用至樹狀項目圖示的樣式。
.MuiTreeItem-labellabel套用至標籤元素的樣式。
.MuiTreeItem-labelInputlabelInput啟用編輯時，套用至可見輸入元素的樣式。
.MuiTreeItem-rootroot套用至根元素的樣式。

您可以使用以下其中一種自訂選項覆寫元件的樣式

原始碼

如果您在此頁面中找不到資訊，請考慮查看元件的實作以取得更多詳細資訊。