跳到內容

TreeItem2API

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

示範

匯入

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

若要瞭解差異，請閱讀這份關於最小化套件大小的指南。

Props

原生元件的 Props 也可用。

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

項目的 ID。必須是唯一的。

childrennode-

元件的內容。

classesobject-

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

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

disabledboolfalse

若為 true，則項目會停用。

idstring-

項目的 id 屬性。若未提供，將會自動產生。

labelnode-

項目的標籤。

onBlurfunc-

項目根元素失去焦點時觸發的回呼。

onFocusunsupportedProp-

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

onKeyDownfunc-

當鍵盤上的按鍵被按下且樹狀結構處於焦點時觸發的回呼。

slotPropsobject{}

用於每個元件插槽的 props。

slotsobject{}

可覆寫的元件插槽。

請參閱下方Slots API 以瞭解更多詳細資訊。

ref 會轉發到根元素。

主題預設 props

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

Slots

插槽名稱類別名稱預設元件描述
root.MuiTreeItem2-rootTreeItem2Root呈現根元素的元件。
content.MuiTreeItem2-contentTreeItem2Content呈現項目內容的元件。（例如：與此項目相關的所有內容，而非其子項目）。
groupTransition.MuiTreeItem2-groupTransitionTreeItem2GroupTransition呈現項目子項目的元件。
iconContainer.MuiTreeItem2-iconContainerTreeItem2IconContainer呈現圖示的元件。
checkbox.MuiTreeItem2-checkboxTreeItem2Checkbox呈現項目核取方塊以進行選取的元件。
label.MuiTreeItem2-labelTreeItem2Label呈現項目標籤的元件。
labelInput.MuiTreeItem2-labelInputTreeItem2LabelInput當項目可編輯且目前正在編輯時，呈現用於編輯標籤的輸入框的元件。
dragAndDropOverlay.MuiTreeItem2-dragAndDropOverlayTreeItem2DragAndDropOverlay當項目重新排序正在進行時，呈現覆蓋層的元件。警告：此插槽僅在使用 <RichTreeViewPro /> 元件時有用。
collapseIcon用於摺疊項目的圖示。
expandIcon用於展開項目的圖示。
endIcon顯示在結束項目旁邊的圖示。
icon顯示在樹狀項目標籤旁邊的圖示。

CSS 類別

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

類別名稱規則名稱描述
.Mui-disabled停用時套用至元素的狀態類別。
.Mui-expanded展開時套用至內容元素的狀態類別。
.Mui-focused焦點在內容元素上時套用的狀態類別。
.Mui-selected選取時套用至內容元素的狀態類別。
.MuiTreeItem2-editableeditable套用至可編輯項目的內容的樣式。
.MuiTreeItem2-editingediting啟用編輯時套用至內容元素的樣式。

您可以使用以下自訂選項之一來覆寫元件的樣式

原始碼

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