Question

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

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

要对它们进行分组，我尝试了他们的expandationPanel 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>
  );
}

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

1 个答案: