跳到内容

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{}

可覆盖的组件插槽。

有关更多详细信息，请参见下方的插槽 API。

ref 被转发到根元素。

主题默认 props

您可以使用 MuiTreeItem2 通过主题更改此组件的默认 props。

插槽

插槽名称类名默认组件描述
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禁用时应用于元素的 State 类。
.Mui-expanded展开时应用于内容元素的 State 类。
.Mui-focused聚焦时应用于内容元素的 State 类。
.Mui-selected选中时应用于内容元素的 State 类。
.MuiTreeItem2-editableeditable应用于可编辑项目的内容的样式。
.MuiTreeItem2-editingediting启用编辑时应用于内容元素的样式。

您可以使用以下自定义选项之一覆盖组件的样式

源代码

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