标签页

选项卡让您可以轻松浏览和切换不同的视图。

选项卡用于组织内容，并允许在相关且处于同一层级结构的内容组之间进行导航。

简介

选项卡是使用相关组件的集合实现的

<Tab /> - 选项卡元素本身。单击选项卡会显示其对应的面板。
<Tabs /> - 容纳选项卡的容器。负责处理选项卡之间的焦点和键盘导航。

项目一

<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>
<CustomTabPanel value={value} index={0}>
  Item One
</CustomTabPanel>
<CustomTabPanel value={value} index={1}>
  Item Two
</CustomTabPanel>
<CustomTabPanel value={value} index={2}>
  Item Three
</CustomTabPanel>

<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>
<CustomTabPanel value={value} index={0}>
  Item One
</CustomTabPanel>
<CustomTabPanel value={value} index={1}>
  Item Two
</CustomTabPanel>
<CustomTabPanel value={value} index={2}>
  Item Three
</CustomTabPanel>

按 Enter 开始编辑

基础知识

import Tabs from '@mui/material/Tabs';
import Tab from '@mui/material/Tab';

实验性 API

@mui/lab 提供了实用组件，这些组件注入了 props 以实现遵循 WAI-ARIA 创作实践的可访问选项卡

<TabList /> - 容纳选项卡的容器。负责处理选项卡之间的焦点和键盘导航。
<TabPanel /> - 托管与选项卡关联的内容的卡片。
<TabContext /> - 包装 Tab List 和 Tab Panel 组件的顶层组件。

项目一

<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>

<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>

按 Enter 开始编辑

包裹标签

长标签将在选项卡上自动换行。如果标签对于选项卡而言太长，则会溢出，并且文本将不可见。

<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>

<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>

按 Enter 开始编辑

彩色选项卡

<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>

<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>

按 Enter 开始编辑

禁用选项卡

可以通过设置 disabled prop 来禁用选项卡。

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

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

按 Enter 开始编辑

固定选项卡

固定选项卡应与有限数量的选项卡一起使用，并且当一致的放置有助于肌肉记忆时。

全宽

variant="fullWidth" prop 应用于较小的视图。

项目一

居中

centered prop 应用于较大的视图。

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

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

按 Enter 开始编辑

可滚动选项卡

自动滚动按钮

使用 variant="scrollable" 和 scrollButtons="auto" props 在桌面上显示左右滚动按钮，这些按钮在移动设备上是隐藏的

<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>

<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>

按 Enter 开始编辑

强制滚动按钮

应用 scrollButtons={true} 和 allowScrollButtonsMobile prop 以在所有视口上显示左右滚动按钮

<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>

<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>

按 Enter 开始编辑

如果您想确保按钮始终可见，则应自定义不透明度。

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

阻止滚动按钮

使用 scrollButtons={false} 永远不会显示左右滚动按钮。所有滚动都必须通过用户代理滚动机制启动（例如，左右滑动、Shift 鼠标滚轮等）

<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>

<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>

按 Enter 开始编辑

自定义

这是自定义组件的示例。您可以在覆盖文档页面中了解更多信息。

🎨 如果您正在寻找灵感，可以查看 MUI Treasury 的自定义示例。

垂直选项卡

要制作垂直选项卡而不是默认的水平选项卡，可以使用 orientation="vertical"

项目一

请注意，您可以使用 visibleScrollbar 恢复滚动条。

导航选项卡

默认情况下，选项卡使用 button 元素，但您可以提供自定义标签或组件。这是一个实现选项卡式导航的示例

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

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

按 Enter 开始编辑

第三方路由库

一个常见的用例是在客户端仅执行导航，而无需 HTTP 往返服务器。Tab 组件提供了 component prop 来处理此用例。这是一个更详细的指南。

图标选项卡

选项卡标签可以是全部图标或全部文本。

<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 tabs example">
  <Tab icon={<PhoneIcon />} aria-label="phone" />
  <Tab icon={<FavoriteIcon />} aria-label="favorite" />
  <Tab icon={<PersonPinIcon />} aria-label="person" />
</Tabs>

按 Enter 开始编辑

<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>

<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>

按 Enter 开始编辑

图标位置

默认情况下，图标位于选项卡的 top。其他支持的位置是 start、end、bottom。

<Tabs
  value={value}
  onChange={handleChange}
  aria-label="icon position tabs example"
>
  <Tab icon={<PhoneIcon />} label="top" />
  <Tab icon={<PhoneMissedIcon />} iconPosition="start" label="start" />
  <Tab icon={<FavoriteIcon />} iconPosition="end" label="end" />
  <Tab icon={<PersonPinIcon />} iconPosition="bottom" label="bottom" />
</Tabs>

<Tabs
  value={value}
  onChange={handleChange}
  aria-label="icon position tabs example"
>
  <Tab icon={<PhoneIcon />} label="top" />
  <Tab icon={<PhoneMissedIcon />} iconPosition="start" label="start" />
  <Tab icon={<FavoriteIcon />} iconPosition="end" label="end" />
  <Tab icon={<PersonPinIcon />} iconPosition="bottom" label="bottom" />
</Tabs>

按 Enter 开始编辑

无障碍功能

（WAI-ARIA：https://www.w3.org/WAI/ARIA/apg/patterns/tabs/）

为了为辅助技术提供必要的信息，需要执行以下步骤

通过 aria-label 或 aria-labelledby 标记 Tabs。
Tab 需要通过设置正确的 id、aria-controls 和 aria-labelledby 连接到它们对应的 [role="tabpanel"]。

可以在此页面上的演示中找到当前实现的示例。我们还在 @mui/lab 中发布了实验性 API，它不需要额外的工作。

这些组件使用“手动激活”行为实现键盘导航。如果您想切换到“选择自动跟随焦点”行为，则必须将 selectionFollowsFocus 传递给 Tabs 组件。WAI-ARIA 创作实践对如何决定何时使选择自动跟随焦点进行了详细的指南。

演示

以下两个演示仅在键盘导航行为上有所不同。聚焦一个选项卡并使用箭头键导航以注意差异，例如 向左箭头键。

/* Tabs where selection follows focus */
<Tabs selectionFollowsFocus />

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

无样式

使用 Base UI Tabs 完全拥有组件的设计，无需覆盖 Material UI 或 Joy UI 样式。此组件的无样式版本是进行大量自定义和缩小捆绑包大小的理想选择。

API

请参阅下面的文档，以获取此处提到的组件的所有可用 props 和类的完整参考。