簡易樹狀檢視 - 項目

瞭解如何將簡單資料新增至樹狀檢視元件。

基本概念

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

簡易樹狀檢視元件直接將其項目接收為 JSX 子項。

項目識別符

每個樹狀項目都必須具有唯一的 itemId。這在內部用於識別各種模型中的項目，並在更新時追蹤它。

<SimpleTreeView>
  <TreeItem itemId="item-unique-id" {...otherItemProps} />
</SimpleTreeView>

項目標籤

您必須將 label 屬性傳遞給每個樹狀項目元件，如下所示

<SimpleTreeView>
  <TreeItem label="Item label" {...otherItemProps} />
</SimpleTreeView>

停用的項目

在樹狀項目元件上使用 disabled 屬性來停用互動和焦點

disabledItemsFocusable 屬性

請注意，以下示範也包含一個開關。這會切換 disabledItemsFocusable 屬性，該屬性控制是否可以聚焦停用的樹狀項目。

當此屬性設定為 false 時

• 使用鍵盤方向鍵導覽將不會聚焦停用的項目，而是會聚焦下一個未停用的項目。
• 輸入停用項目標籤的第一個字元將不會將焦點移至該項目。
• 滑鼠或鍵盤互動將不會展開/摺疊停用的項目。
• 滑鼠或鍵盤互動將不會選取停用的項目。
• Shift + 方向鍵將跳過停用的項目，而是會選取下一個未停用的項目。
• 程式化焦點將不會聚焦停用的項目。

當它設定為 true 時

• 使用鍵盤方向鍵導覽將會聚焦停用的項目。
• 輸入停用項目標籤的第一個字元將會將焦點移至該項目。
• 滑鼠或鍵盤互動將不會展開/摺疊停用的項目。
• 滑鼠或鍵盤互動將不會選取停用的項目。
• Shift + 方向鍵將不會跳過停用的項目，但不會選取停用的項目。
• 程式化焦點將會聚焦停用的項目。

追蹤項目點擊

使用 onItemClick 屬性來追蹤點擊的項目

命令式 API

依 ID 取得項目的 DOM 元素

使用 getItemDOMElement API 方法依其 ID 取得項目的 DOM 元素。

const itemElement = apiRef.current.getItemDOMElement(
  // The id of the item to get the DOM element of
  itemId,
);

API

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

• <SimpleTreeView />
• <TreeItem />