RichTreeViewProAPI

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

範例

如需此 React 元件的使用範例和詳細資訊，請造訪元件範例頁面

豐富樹狀檢視 - 排序

匯入

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

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

Props

原生元件的 Props 也可使用。

名稱	類型	預設	描述
apiRef	{ current?: { focusItem: func, getItem: func, getItemDOMElement: func, getItemOrderedChildrenIds: func, getItemTree: func, selectItem: func, setItemExpansion: func, updateItemLabel: func } }	-	允許樹狀檢視操作的 ref 物件。可以使用 `useTreeViewApiRef()` 實例化。
canMoveItemToNewPosition	func	-	用於判斷給定項目是否可以移動到新的位置。簽名：`function(params: object, params.itemId: string, params.oldPosition: TreeViewItemReorderPosition, params.newPosition: TreeViewItemReorderPosition) => boolean` `params` 描述項目重新排序的參數。 `params.itemId` 正在移動到新位置的項目 ID。 `params.oldPosition` 項目舊的位置。 `params.newPosition` 項目新的位置。回傳值：如果項目可以移動到新的位置，則為 `true`。
checkboxSelection	bool	false	如果為 `true`，樹狀檢視會在標籤左側呈現一個核取方塊，允許選取它。
classes	object	-	覆寫或擴充套用至元件的樣式。請參閱下方的 CSS classes API 以取得更多詳細資訊。
defaultExpandedItems	Array<string>	[]	展開的項目 ID。當項目的展開不受控制時使用。
defaultSelectedItems	any	[]	選取的項目 ID。（非受控）當 `multiSelect` 為 true 時，這會採用字串陣列；當為 false（預設）時，則為字串。
disabledItemsFocusable	bool	false	如果為 `true`，將允許焦點在停用的項目上。
disableSelection	bool	false	如果為 `true`，則停用選取。
expandedItems	Array<string>	-	展開的項目 ID。當項目的展開受控制時使用。
expansionTrigger	'content' \| 'iconContainer'	'content'	點擊時觸發項目展開的 slot。
experimentalFeatures	{ indentationAtItemLevel?: bool, itemsReordering?: bool, labelEditing?: bool }	-	不穩定的功能，可能會引入重大變更。對於每個功能，如果 flag 未明確設定為 `true`，則該功能將完全停用，並且任何屬性/方法呼叫都不會產生任何效果。
getItemId	func	(item) => item.id	用於判斷給定項目的 ID。簽名：`function(item: R) => string` `item` 要檢查的項目。回傳值：項目的 ID。
getItemLabel	func	(item) => item.label	用於判斷給定項目的字串標籤。簽名：`function(item: R) => string` `item` 要檢查的項目。回傳值：項目的標籤。
id	string	-	此 prop 用於協助實作協助工具邏輯。如果您未提供此 prop，則會回退到隨機產生的 ID。
isItemDisabled	func	-	用於判斷給定項目是否應停用。簽名：`function(item: R) => boolean` `item` 要檢查的項目。回傳值：如果項目應停用，則為 `true`。
isItemEditable	func \| bool	-	判斷給定項目是否可編輯。請務必同時啟用 `labelEditing` 實驗性功能：`<RichTreeViewPro experimentalFeatures={{ labelEditing: true }} />`。預設情況下，項目不可編輯。
isItemReorderable	func	() => true	用於判斷給定項目是否可以重新排序。簽名：`function(itemId: string) => boolean` `itemId` 要檢查的項目 ID。回傳值：如果項目可以重新排序，則為 `true`。
itemChildrenIndentation	number \| string	12px	項目及其子項目之間的水平縮排。範例：24、"24px"、"2rem"、"2em"。
itemsReordering	bool	false	如果為 `true`，則啟用項目的重新排序。請務必同時啟用 `itemsReordering` 實驗性功能：`<RichTreeViewPro experimentalFeatures={{ itemsReordering: true }} itemsReordering />`。
multiSelect	bool	false	如果為 `true`，則 `ctrl` 和 `shift` 將觸發多重選取。
onExpandedItemsChange	func	-	當樹狀檢視項目展開/摺疊時觸發的回呼。簽名：`function(event: React.SyntheticEvent, itemIds: array) => void` `event` 觸發變更的 DOM 事件。 `itemIds` 展開項目的 ID。
onItemClick	func	-	當點擊給定樹狀檢視項目的 `content` slot 時觸發的回呼。簽名：`function(event: React.MouseEvent, itemId: string) => void` `event` 觸發變更的 DOM 事件。 `itemId` 焦點項目的 ID。
onItemExpansionToggle	func	-	當樹狀檢視項目展開或摺疊時觸發的回呼。簽名：`function(event: React.SyntheticEvent, itemId: array, isExpanded: array) => void` `event` 觸發變更的 DOM 事件。 `itemId` 修改項目的項目 ID。 `isExpanded` 如果項目剛展開則為 `true`，如果剛摺疊則為 `false`。
onItemFocus	func	-	當給定樹狀檢視項目取得焦點時觸發的回呼。簽名：`function(event: React.SyntheticEvent \| null, itemId: string) => void` `event` 觸發變更的 DOM 事件。警告：這是一個通用事件，而非焦點事件。 `itemId` 焦點項目的 ID。
onItemLabelChange	func	-	當項目標籤變更時觸發的回呼。簽名：`function(itemId: TreeViewItemId, newLabel: string) => void` `itemId` 已編輯項目的 ID。 `newLabel` 項目新的標籤。
onItemPositionChange	func	-	當樹狀檢視項目在樹狀結構中移動時觸發的回呼。簽名：`function(params: object, params.itemId: string, params.oldPosition: TreeViewItemReorderPosition, params.newPosition: TreeViewItemReorderPosition) => void` `params` 描述項目重新排序的參數。 `params.itemId` 移動項目的 ID。 `params.oldPosition` 項目舊的位置。 `params.newPosition` 項目新的位置。
onItemSelectionToggle	func	-	當樹狀檢視項目選取或取消選取時觸發的回呼。簽名：`function(event: React.SyntheticEvent, itemId: array, isSelected: array) => void` `event` 觸發變更的 DOM 事件。 `itemId` 修改項目的項目 ID。 `isSelected` 如果項目剛選取則為 `true`，如果剛取消選取則為 `false`。
onSelectedItemsChange	func	-	當樹狀檢視項目選取/取消選取時觸發的回呼。簽名：`function(event: React.SyntheticEvent, itemIds: Array \| string) => void` `event` 觸發變更的 DOM 事件。 `itemIds` 選取項目的 ID。當 `multiSelect` 為 `true` 時，這是一個字串陣列；當為 false（預設）時，則為字串。
selectedItems	any	-	選取的項目 ID。（受控）當 `multiSelect` 為 true 時，這會採用字串陣列；當為 false（預設）時，則為字串。
slotProps	object	{}	用於每個元件 slot 的 props。
slots	object	{}	可覆寫的元件 slot。請參閱下方的 Slots API 以取得更多詳細資訊。
sx	Array<func \| object \| bool> \| func \| object	-	允許定義系統覆寫以及額外 CSS 樣式的系統 prop。請參閱 `` 頁面以取得更多詳細資訊。

ref 會轉發到根元素。

主題預設 props

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

Slots

Slot 名稱	類別名稱	預設元件	描述
root	.MuiRichTreeViewPro-root	`RichTreeViewProRoot`	在根部呈現的元素。
item		`TreeItem。`	項目的自訂元件。
collapseIcon			用於摺疊項目的預設圖示。
expandIcon			用於展開項目的預設圖示。
endIcon			顯示在結束項目旁邊的預設圖示。這會套用至所有樹狀檢視項目，並且可以被 TreeItem `icon` slot prop 覆寫。

原始碼

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