SimpleTreeViewAPI

React SimpleTreeView 组件的 API 参考文档。了解此导出模块的属性、CSS 和其他 API。

演示

有关此 React 组件用法的示例和详细信息，请访问组件演示页面

导入

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

阅读关于最小化 bundle 大小的指南，了解它们之间的区别。

属性

原生组件的属性也可用。

名称	类型	默认值	描述
apiRef	{ current?: { focusItem: func, getItem: func, getItemDOMElement: func, getItemOrderedChildrenIds: func, getItemTree: func, selectItem: func, setItemExpansion: func } }	-	允许树形视图操作的 ref 对象。可以使用 `useTreeViewApiRef()` 实例化。
checkboxSelection	布尔值	false	如果为 `true`，树形视图将在其标签左侧渲染一个复选框，允许选择它。
children	节点	-	组件的内容。
classes	对象	-	覆盖或扩展应用于组件的样式。有关更多详细信息，请参阅下面的 CSS 类 API。
defaultExpandedItems	Array<string>	[]	展开的条目 ID。当条目的展开状态不受控制时使用。
defaultSelectedItems	any	[]	选定的条目 ID。（非受控）当 `multiSelect` 为 true 时，这将采用字符串数组；当为 false（默认）时，采用字符串。
disabledItemsFocusable	布尔值	false	如果为 `true`，将允许聚焦禁用条目。
disableSelection	布尔值	false	如果为 `true`，则禁用选择。
expandedItems	Array<string>	-	展开的条目 ID。当条目的展开状态受控时使用。
expansionTrigger	'content' \| 'iconContainer'	'content'	单击时触发条目展开的插槽。
experimentalFeatures	{ indentationAtItemLevel?: bool }	-	不稳定功能，可能会引入重大更改。对于每个功能，如果未显式将标志设置为 `true`，则该功能将被完全禁用，并且任何属性/方法调用都不会产生任何影响。
id	字符串	-	此属性用于帮助实现无障碍性逻辑。如果您不提供此属性，它将回退到随机生成的 ID。
itemChildrenIndentation	数字 \| 字符串	12px	条目及其子项之间的水平缩进。示例：24, '24px', '2rem', '2em'。
multiSelect	布尔值	false	如果为 `true`，`ctrl` 和 `shift` 将触发多选。
onExpandedItemsChange	函数	-	当树形条目展开/折叠时触发的回调。签名:`function(event: React.SyntheticEvent, itemIds: array) => void` `event` 触发更改的 DOM 事件。 `itemIds` 展开条目的 ID。
onItemClick	函数	-	当单击给定树形条目的 `content` 插槽时触发的回调。签名:`function(event: React.MouseEvent, itemId: string) => void` `event` 触发更改的 DOM 事件。 `itemId` 焦点条目的 ID。
onItemExpansionToggle	函数	-	当树形条目展开或折叠时触发的回调。签名:`function(event: React.SyntheticEvent, itemId: array, isExpanded: array) => void` `event` 触发更改的 DOM 事件。 `itemId` 已修改条目的 itemId。 `isExpanded` 如果条目刚刚展开，则为 `true`；如果刚刚折叠，则为 `false`。
onItemFocus	函数	-	当给定树形条目获得焦点时触发的回调。签名:`function(event: React.SyntheticEvent \| null, itemId: string) => void` `event` 触发更改的 DOM 事件。警告：这是一个通用事件，而不是焦点事件。 `itemId` 焦点条目的 ID。
onItemSelectionToggle	函数	-	当树形条目被选中或取消选中时触发的回调。签名:`function(event: React.SyntheticEvent, itemId: array, isSelected: array) => void` `event` 触发更改的 DOM 事件。 `itemId` 已修改条目的 itemId。 `isSelected` 如果条目刚刚被选中，则为 `true`；如果刚刚被取消选中，则为 `false`。
onSelectedItemsChange	函数	-	当树形条目被选中/取消选中时触发的回调。签名:`function(event: React.SyntheticEvent, itemIds: Array \| string) => void` `event` 触发更改的 DOM 事件。 `itemIds` 选定条目的 ID。当 `multiSelect` 为 `true` 时，这是一个字符串数组；当为 false（默认）时，这是一个字符串。
selectedItems	any	-	选定的条目 ID。（受控）当 `multiSelect` 为 true 时，这将采用字符串数组；当为 false（默认）时，采用字符串。
slotProps	对象	-	用于每个组件插槽的属性。
slots	对象	-	可覆盖的组件插槽。有关更多详细信息，请参阅下面的插槽 API。
sx	Array<func \| object \| bool> \| func \| object	-	允许定义系统覆盖以及其他 CSS 样式的系统属性。有关更多详细信息，请参阅 `sx` 页面。

ref 被转发到根元素。

主题默认属性

您可以使用 MuiSimpleTreeView 通过主题更改此组件的默认属性。

插槽

插槽名称	类名	默认组件	描述
root	.MuiSimpleTreeView-root	`SimpleTreeViewRoot`	在根元素处渲染的元素。
collapseIcon			用于折叠条目的默认图标。
expandIcon			用于展开条目的默认图标。
endIcon			显示在末端条目旁边的默认图标。这应用于所有树形条目，并且可以被 TreeItem `icon` 插槽属性覆盖。

源代码

如果您在此页面中找不到信息，请考虑查看组件的实现以获取更多详细信息。