Материал интерфейса - вкладки: как группировать или свернуть вкладку

Question

Я использую Material-UI и использую их API вкладок для создания вертикальных вкладок. На TabPanel я показываю контент, и пока все работает нормально.

Теперь количество элементов Tab растет, поэтому я должен сгруппировать их по категориям. Но я не смог найти ни одного свойства, которое обрабатывало бы дочернюю вкладку или складное свойство для поддержки группировки вкладок. По крайней мере, эта информация недоступна на веб-сайте Material-UI .

. Чтобы сгруппировать их, я попробовал их API extensionPanel, но это не работает, и выравнивание вкладок становится горизонтальным и нарушает раздел вкладок. Также попытался свернуть 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>
  );
}