Material-ui 选项卡 - 我如何放置它们的滚动条答案

【问题标题】：Material-ui Tabs - how can I put scroll of themMaterial-ui 选项卡 - 我如何放置它们的滚动条
【发布时间】：2021-01-04 06:56:24
【问题描述】：

我在我的 AppBar 组件中使用 Material-ui Tablist。问题是我有太多选项卡，我想让它们响应 - 当我的屏幕较小时，其中一些是不可见的。

组件的文档：

https://material-ui.com/components/tabs/

当我有这么多标签时，你可以看到它是如何隐藏最后一个的：

https://codesandbox.io/s/nervous-hoover-809s0?file=/src/App.js

是否可以在 AppBar 组件下添加滚动条之类的东西，或者当有其他不可见的组件时，可以添加左右箭头之类的东西？

可能应该在此部分添加滚动或箭头：

 <AppBar position="static">
            <TabList onChange={handleChange} aria-label="simple tabs example">
              <Tab label="Business Info" value="1" icon={<ContactMailIcon />} />
              <Tab label="Financial" value="2" icon={<MonetizationOnIcon />} />
              <Tab
                label="Participants"
                value="3"
                icon={<AccessibilityIcon />}
              />
              <Tab label="Statistics" value="4" icon={<EqualizerIcon />} />
              <Tab label="Alerts" value="5" icon={<ReportProblemIcon />} />
              <Tab label="Health Care" value="6" icon={<FavoriteIcon />} />
              <Tab label="Plans" value="7" icon={<ListAltIcon />} />
              <Tab
                label="Benchmark"
                value="8"
                icon={<ListAltIcon />}
              />
              <Tab
                label="Heatmap"
                value="9"
                icon={<ListAltIcon />}
              />
              <Tab
                label="Diagnostic"
                value="10"
                icon={<ListAltIcon />}
              />
            </TabList>
          </AppBar>

但是在代码和框示例中你会有更好的观点。

【问题讨论】：

标签： javascript reactjs tabs material-ui appbar

【解决方案1】：

TabList 接受一个 prop variant="scrollable"，它设置可滚动属性并在侧面提供一个小箭头指示器。

这是可滚动标签的演示：- https://material-ui.com/components/tabs/#automatic-scroll-buttons

<TabList variant="scrollable" onChange={handleChange} aria-label="simple tabs example">
  <Tab label="Business Info" value="1" icon={<ContactMailIcon />} />
  <Tab label="Financial" value="2" icon={<MonetizationOnIcon />} />
  <Tab label="Participants" value="3" icon={<AccessibilityIcon />} />
  <Tab label="Statistics" value="4" icon={<EqualizerIcon />} />
  <Tab label="Alerts" value="5" icon={<ReportProblemIcon />} />
  <Tab label="Health Care" value="6" icon={<FavoriteIcon />} />
  <Tab label="Plans" value="7" icon={<ListAltIcon />} />
  <Tab label="Benchmark" value="8" icon={<ListAltIcon />} />
  <Tab label="Heatmap" value="9" icon={<ListAltIcon />} />
  <Tab label="Diagnostic" value="10" icon={<ListAltIcon />} />
</TabList>

这是工作代码和框链接：- https://codesandbox.io/s/affectionate-firefly-z61em?file=/src/App.js

【讨论】：