如何在 Material UI 选项卡中拥有多行选项卡

Question

我在 Material UI 选项卡中有近 30 个选项卡，用户必须滚动两次才能看到所有选项卡，我想在两行滚动显示选项卡，而不是滚动显示一行，这将帮助用户一眼就能看到大部分标签。
我该怎么做这样的事情？，我查看了 Material UI 文档，但找不到任何有用的东西，我尝试手动为其赋予 CSS 样式，但我无法实现我的目标（我的 CSS 技能平庸）。 为了说明我所说的 multiple row tabs 的意思，这里是一个示例图像：

非常感谢任何帮助。

Answer 1

我正在努力解决类似的问题。我已经扔掉了文档，看起来使用 Tabs/Tab 功能是不可能的。现在我可以看到两个选项：

1. 使用上面提到的属性 variant="scrollable" 和 scrollButtons="auto"。这不会给你预期的结果，但至少它是有效的。
2. 实现您自己的选项卡。你可以使用 Grid 来实现它。下面的例子只是为了展示一种方法。它不是redy解决方案，但可以轻松调整。

const useStyles = makeStyles((theme) => ({
  navigationLinkContainer: { 
    // up to you
  },
  navigationLinkButtonActive: {
    color: '#ffffff',
    // up to you
  },
 
}));

const NavigationLink = (props) => {
  const classes = useStyles();
  return (
    <Grid item className={classes.navigationLinkContainer}>
      <Button
        component={Link}
        onClick={props.onClick}
      >
        {props.children}
      </Button>
    </Grid>
  );
};

const NavigationHeaders = (props) => {
  const classes = useStyles();
  const { headers, className } = props;
  const [activeTab, setActiveTab] = React.useState('');

  const isActive = (headerId) => headerId === activeTab;

  return (
    <>
     <Grid container >
      {headers.map((header) => (
        <NavigationLink
          className={classnames(isActive(header.id) && classes.navigationLinkButtonActive)}
          key={header.id}
          onClick={() => setActiveTab(header.id)}
        >
          {header.title}
        </NavigationLink>
      ))}
     </Grid>
     {/* some content here shown base on activeTab */}
   </>
  );
};

Answer 2

我还得出结论，目前使用 Tabs/Tab 是不可能的。我尝试使用<br />、<hr />、<Divider />、插入中断的函数、制作多行制表符（这弄乱了选择）、用max-width 将制表符包装在span 中（也弄乱了选择），你命名它。我最终决定在小屏幕上使用滚动。

我想出了可以正确显示我的标签的最小屏幕尺寸，然后将滚动用于任何更小的尺寸。

const mql = window.matchMedia('(max-width: 2000px)');
const smallScreen = mql.matches;

<Tabs
  value={tabValue}
  onChange={handleTabChange}
  orientation="horizontal"
  variant={smallScreen ? 'scrollable' : 'standard'}
  centered={!smallScreen}
 >
   <Tab label="1" />
   <Tab label="1" />
   <Tab label="3" />
   <Tab label="4" />
   <Tab label="5" />
  </Tabs>

您可以添加一个事件处理程序以在调整大小时进行更改，但对于我的用例来说不是必需的

Answer 3

尝试查看您使用的任何东西的文档，以防止将来出现不必要的问题

访问这里了解更多详情和完整代码https://material-ui.com/components/tabs/

<div className={classes.root}>
  <AppBar position="static">
    <Tabs value={value}
     onChange={handleChange} 
      aria-label="simple tabs example" 
      indicatorColor="primary"
      textColor="primary"
      variant="scrollable"
      scrollButtons="auto"
      aria-label="scrollable auto tabs example"
    >
      <Tab label="Item One" {...a11yProps(0)} />
      <Tab label="Item Two" {...a11yProps(1)} />
      <Tab label="Item Three" {...a11yProps(2)} />
    </Tabs>
  </AppBar>
  <TabPanel value={value} index={0}>
    Item One
  </TabPanel>
  <TabPanel value={value} index={1}>
    Item Two
  </TabPanel>
  <TabPanel value={value} index={2}>
    Item Three
  </TabPanel>
</div>

编辑：请注意选项卡中的变体