跳转到内容
编辑此页面

Tabs 选项卡

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

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

基础选项卡

A basic example with tab panels.

Item One

<Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
  <Tabs value={value} onChange={handleChange} aria-label="basic tabs example">
    <Tab label="Item One" {...a11yProps(0)} />
    <Tab label="Item Two" {...a11yProps(1)} />
    <Tab label="Item Three" {...a11yProps(2)} />
  </Tabs>
</Box>
<TabPanel value={value} index={0}>
  Item One
</TabPanel>
<TabPanel value={value} index={1}>
  Item Two
</TabPanel>
<TabPanel value={value} index={2}>
  Item Three
</TabPanel>

实验性的 API

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

Item One
<TabContext value={value}>
  <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
    <TabList onChange={handleChange} aria-label="lab API tabs example">
      <Tab label="Item One" value="1" />
      <Tab label="Item Two" value="2" />
      <Tab label="Item Three" value="3" />
    </TabList>
  </Box>
  <TabPanel value="1">Item One</TabPanel>
  <TabPanel value="2">Item Two</TabPanel>
  <TabPanel value="3">Item Three</TabPanel>
</TabContext>

包装的标签

对于那些比较长的标签，它们会被自动包装成选项卡。 If the label is too long for the tab, it will overflow, and the text will not be visible.

<Tabs
  value={value}
  onChange={handleChange}
  aria-label="wrapped label tabs example"
>
  <Tab
    value="one"
    label="New Arrivals in the Longest Text of Nonfiction that should appear in the next line"
    wrapped
  />
  <Tab value="two" label="Item Two" />
  <Tab value="three" label="Item Three" />
</Tabs>

Colored tab

<Tabs
  value={value}
  onChange={handleChange}
  textColor="secondary"
  indicatorColor="secondary"
  aria-label="secondary tabs example"
>
  <Tab value="one" label="Item One" />
  <Tab value="two" label="Item Two" />
  <Tab value="three" label="Item Three" />
</Tabs>

禁用选项卡

A tab can be disabled by setting the disabled prop.

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

固定的选项卡

Fixed tabs should be used with a limited number of tabs, and when a consistent placement will aid muscle memory.

全宽

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

Item One

居中对齐

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

<Tabs value={value} onChange={handleChange} centered>
  <Tab label="Item One" />
  <Tab label="Item Two" />
  <Tab label="Item Three" />
</Tabs>

可滚动的选项卡

自动显示滚动按钮

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

<Tabs
  value={value}
  onChange={handleChange}
  variant="scrollable"
  scrollButtons="auto"
  aria-label="scrollable auto tabs example"
>
  <Tab label="Item One" />
  <Tab label="Item Two" />
  <Tab label="Item Three" />
  <Tab label="Item Four" />
  <Tab label="Item Five" />
  <Tab label="Item Six" />
  <Tab label="Item Seven" />
</Tabs>

强制显示滚动按钮

通过使用 scrollButtons={true} allowScrollButtonsMobile 属性，无论当前视图宽度如何，都会显示左右的滚动按钮（保留空间）

<Tabs
  value={value}
  onChange={handleChange}
  variant="scrollable"
  scrollButtons
  allowScrollButtonsMobile
  aria-label="scrollable force tabs example"
>
  <Tab label="Item One" />
  <Tab label="Item Two" />
  <Tab label="Item Three" />
  <Tab label="Item Four" />
  <Tab label="Item Five" />
  <Tab label="Item Six" />
  <Tab label="Item Seven" />
</Tabs>

如果你想确保按钮始终可见，那么你应该自定义不透明度：

.MuiTabs-scrollButtons.Mui-disabled {
  opacity: 0.3;
}

永久隐藏滚动按钮

你可以使用 scrollButtons={false} 属性来永远隐藏左右的滚动按钮。 All scrolling must be initiated through user agent scrolling mechanisms (e.g. left/right swipe, shift mouse wheel, etc.)

<Tabs
  value={value}
  onChange={handleChange}
  variant="scrollable"
  scrollButtons={false}
  aria-label="scrollable prevent tabs example"
>
  <Tab label="Item One" />
  <Tab label="Item Two" />
  <Tab label="Item Three" />
  <Tab label="Item Four" />
  <Tab label="Item Five" />
  <Tab label="Item Six" />
  <Tab label="Item Seven" />
</Tabs>

自定义的选项卡

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

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

垂直的选项卡

使用 orientation="vertical" 来使垂直标签代替默认的水平标签。

Item One

请注意，你可以使用 visibleScrollbar 来恢复显示滚动条。

Nav tabs

By default, tabs use a button element, but you can provide your custom tag or component. 下面是一个实现导航选项卡的例子：

Page OnePage TwoPage Three
<Tabs value={value} onChange={handleChange} aria-label="nav tabs example">
  <LinkTab label="Page One" href="/drafts" />
  <LinkTab label="Page Two" href="/trash" />
  <LinkTab label="Page Three" href="/spam" />
</Tabs>

Icon tabs

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

<Tabs value={value} onChange={handleChange} aria-label="icon tabs example">
  <Tab icon={<PhoneIcon />} aria-label="phone" />
  <Tab icon={<FavoriteIcon />} aria-label="favorite" />
  <Tab icon={<PersonPinIcon />} aria-label="person" />
</Tabs>
<Tabs value={value} onChange={handleChange} aria-label="icon label tabs example">
  <Tab icon={<PhoneIcon />} label="RECENTS" />
  <Tab icon={<FavoriteIcon />} label="FAVORITES" />
  <Tab icon={<PersonPinIcon />} label="NEARBY" />
</Tabs>

Third-party routing library（第三方路由库）

One frequent use case is to perform navigation on the client only, without an HTTP round-trip to the server. The Tab component provides the component prop to handle this use case. Here is a more detailed guide.

无障碍设计

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

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

  1. 在 Tabs 上应用 aria-label 或 aria-labelledby 标签。
  2. 通过设置 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。

演示

下面的两个演示只是在键盘导航行为上有所区别。 Focus a tab and navigate with arrow keys to notice the difference, e.g. Arrow Left.

/* 那个跟随焦点的选项卡 */
<Tabs selectionFollowsFocus />

/* Tabs where each tab needs to be selected manually */
<Tabs />

API