Material UI - 选项卡：如何分组或折叠选项卡

Question

我正在使用 Material-UI 并使用他们的 Tabs API 来制作垂直标签。在 TabPanel 上，我正在显示内容，到目前为止一切正常。

现在，Tab 项的数量正在增长，所以我必须将它们按类别分组。但是我找不到任何处理子选项卡或可折叠属性以支持对选项卡进行分组的属性。 Material-UI website 上至少没有此信息。

为了对它们进行分组，我尝试了他们的 expandPanel api，但这不起作用，并且选项卡对齐变为水平并扰乱了选项卡部分。还尝试了折叠 api，但随后选项卡无法正常工作并且对齐受到干扰.. 如此挣扎。 请帮助我。

• --Tab1

• --Tab2

• --Tab3 ^

  • ---Tab4

  • ---Tab5

  • ---Tab6

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>
  );
}