Tabs 选项卡

使用选项卡，你可以轻松地浏览和切换不同的视图。

对于在同一层次并且息息相关的内容组，使用选项卡能够将它们分组并且在其之间切换。

简单的选项卡

一个没有多余装饰的简单例子

Item One

<AppBar position="static">
  <Tabs value={value} onChange={handleChange} aria-label="simple 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>

包装的标签

对于那些比较长的标签，它们会被自动包装成选项卡。如果标签超出了选项卡的长度，它则会溢出，并且文本会隐藏。

Item One

不可用的选项卡

选项卡的 disabled 属性能将其设置为不可用的状态。

<Paper square>
  <Tabs
    value={value}
    indicatorColor="primary"
    textColor="primary"
    onChange={handleChange}
    aria-label="disabled tabs example"
  >
    <Tab label="Active" />
    <Tab label="Disabled" disabled />
    <Tab label="Active" />
  </Tabs>
</Paper>

固定的选项卡

固定的标签应与定量的选项卡一起使用，而将它们整齐放置则会有助于用户的肌肉记忆。

全宽

若是较小的视图，则应使用 variant="fullWidth" 属性。在这个演示中你还可以借鉴用 react-swipeable-views 来设置选项卡的过渡动画，并且在使用触摸设备时滑动标签。

Item One

居中对齐

而对于较大的视图，则应使用 centered 属性。

<Paper className={classes.root}>
  <Tabs
    value={value}
    onChange={handleChange}
    indicatorColor="primary"
    textColor="primary"
    centered
  >
    <Tab label="Item One" />
    <Tab label="Item Two" />
    <Tab label="Item Three" />
  </Tabs>
</Paper>

可滚动的选项卡

自动滚动按钮

左右滚动按钮将自动在桌面显示，并在移动设备上隐藏。（基于视图宽度）

Item One

强制滚动按钮

无论视图的宽度如何，都将显示左右滚动按钮。

Item One

防止滚动按钮

永远不会显示左右滚动按钮。所有的滚动比如通过用户代理的滚动机制来发起（例如，左右滑动，移动鼠标滑轮等等）。

Item One

自定义的选项卡

以下是自定义组件的一个示例。您可以在重写文档页面中了解更多有关此内容的信息。

<div className={classes.demo1}>
  <AntTabs value={value} onChange={handleChange} aria-label="ant example">
    <AntTab label="Tab 1" />
    <AntTab label="Tab 2" />
    <AntTab label="Tab 3" />
  </AntTabs>
  <Typography className={classes.padding} />
</div>
<div className={classes.demo2}>
  <StyledTabs value={value} onChange={handleChange} aria-label="styled tabs example">
    <StyledTab label="Workflows" />
    <StyledTab label="Datasets" />
    <StyledTab label="Connections" />
  </StyledTabs>
  <Typography className={classes.padding} />
</div>

🎨 如果您还在寻找灵感，您可以看看 MUI Treasury 特别定制的一些例子。

垂直的选项卡

Item One

导航选项卡

默认情况下，选项卡会使用 按钮 组件，但您也可以提供自定义的标签或组件。下面是一个实现导航选项卡的例子：

Page One Page Two Page Three

Page One

图标选项卡

选项卡的标签可以是所有的图标或者所有的文本。

<Paper square className={classes.root}>
  <Tabs
    value={value}
    onChange={handleChange}
    variant="fullWidth"
    indicatorColor="primary"
    textColor="primary"
    aria-label="icon tabs example"
  >
    <Tab icon={<PhoneIcon />} aria-label="phone" />
    <Tab icon={<FavoriteIcon />} aria-label="favorite" />
    <Tab icon={<PersonPinIcon />} aria-label="person" />
  </Tabs>
</Paper>

<Paper square className={classes.root}>
  <Tabs
    value={value}
    onChange={handleChange}
    variant="fullWidth"
    indicatorColor="secondary"
    textColor="secondary"
    aria-label="icon label tabs example"
  >
    <Tab icon={<PhoneIcon />} label="RECENTS" />
    <Tab icon={<FavoriteIcon />} label="FAVORITES" />
    <Tab icon={<PersonPinIcon />} label="NEARBY" />
  </Tabs>
</Paper>

无障碍设计

(WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#tabpanel)

您需要采取以下步骤，来为无障碍技术提供一些必要的信息：

在 Tabs 上应用 aria-label 或 aria-labelledby 标签。
通过设置 id、aria-controls 和 aria-labelledby ，Tab 需要连接到其对应的 [role="tabpanel"]。

实现这样的设计例子可以在本页面的演示中找到。我们还在 @material-ui/lab 中发布了不需要额外工作就能使用的一个实验性的 API。

键盘导航

该组件使用“手动激活”的行为来实现键盘导航。如果你想切换到“选择自动跟随焦点”（selection automatically follows focus）的行为，你必须将 selectionFollowsFocus 传递给 Tabs 组件。 WAI-ARIA 项目实践中有一个详细的指南关于 how to decide when to make selection automatically follow focus。

演示

下面的两个演示只是在键盘导航行为上有所区别。聚焦到其中一个选项卡，然后用方向键导航你就可以注意到其中的差异。

/* 那个跟随焦点的选项卡 */
<Tabs selectionFollowsFocus />
/* 需要手动选择选项卡中的每一个选项 */
<Tabs />

实验性的 API

遵循 WAI-ARIA 项目实践，@material-ui/lab 提供了工具集组件，该组件通过注入属性的方式来实现无障碍设计的选项卡。

Item One

<TabContext value={value}>
  <AppBar position="static">
    <TabList onChange={handleChange} aria-label="simple tabs example">
      <Tab label="Item One" value="1" />
      <Tab label="Item Two" value="2" />
      <Tab label="Item Three" value="3" />
    </TabList>
  </AppBar>
  <TabPanel value="1">Item One</TabPanel>
  <TabPanel value="2">Item Two</TabPanel>
  <TabPanel value="3">Item Three</TabPanel>
</TabContext>