物料界面-选项卡:如何分组或折叠选项卡

Question

我使用的是Material-UI，并使用了选项卡API来制作垂直选项卡。在TabPanel上，我正在显示内容，到目前为止一切都很好。

现在，Tab项目的数量在增长，所以我必须根据它们的类别对它们进行分组。但我找不到任何处理子选项卡的属性或可折叠属性来支持对选项卡进行分组。至少此信息在Material UI网站上不可用。

为了对它们进行分组，我尝试了他们的扩展面板api，但这不起作用，选项卡对齐变成了水平的，并干扰了选项卡部分。还尝试了collapse api，但随后选项卡无法工作，对齐受到干扰。。如此艰难。请帮帮我。

• --表1

• --表2

• --表格3^

  • ---表4

  • ---表5

  • ---表6

Answer 1

您可能希望使用<List>和<Collapse>组件，而不是<Tab>组件。

下面是一个用法示例：

import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import Collapse from '@material-ui/core/Collapse';
import ExpandLess from '@material-ui/icons/ExpandLess';
import ExpandMore from '@material-ui/icons/ExpandMore';

export default function NestedList() {
const [open, setOpen] = React.useState(true);
const handleClick = () => {
setOpen(!open);
};
return (
<List component="nav">
<ListItem button>
Tab 1
</ListItem>
<ListItem button>
Tab 2
</ListItem>
<ListItem button onClick={handleClick}>
Tab 3
{open ? <ExpandLess /> : <ExpandMore />}
</ListItem>
<Collapse in={open} timeout="auto" unmountOnExit>
<List component="div" disablePadding>
<ListItem button>
Tab 4
</ListItem>
<ListItem button>
Tab 5
</ListItem>
<ListItem button>
Tab 6
</ListItem>
</List>
</Collapse>
</List>
);
}