标签页

标签页使浏览和切换不同视图变得容易。

简介

Joy UI 提供了四个与标签页相关的组件

Tabs：一个上下文提供器，用于同步选定的 Tab 和相应的 TabPanel。
TabList：一个包含 Tab 项的容器。
Tab：一个用于切换所选标签页的按钮。
TabPanel：当其值与所选标签页匹配时，屏幕上显示的窗格。

标签页 A 的内容

<Tabs>
  <TabList>
    <Tab
      variant="plain"
      color="neutral">...</Tab>
  </TabList>
  <TabPanel>...</TabPanel>
</Tabs>

基础

import Tabs from '@mui/joy/Tabs';
import TabList from '@mui/joy/TabList';
import Tab from '@mui/joy/Tab';

Joy UI 的标签页组件集遵循 WAI ARIA 设计模式指南。

在 Tab Panel 上使用 value 属性，在 Tabs 组件上使用 defaultValue 属性来定位选定的标签页。

第一个 标签页面板

<Tabs aria-label="Basic tabs" defaultValue={0}>
  <TabList>
    <Tab>First tab</Tab>
    <Tab>Second tab</Tab>
    <Tab>Third tab</Tab>
  </TabList>
  <TabPanel value={0}>
    <b>First</b> tab panel
  </TabPanel>
  <TabPanel value={1}>
    <b>Second</b> tab panel
  </TabPanel>
  <TabPanel value={2}>
    <b>Third</b> tab panel
  </TabPanel>
</Tabs>

<Tabs aria-label="Basic tabs" defaultValue={0}>
  <TabList>
    <Tab>First tab</Tab>
    <Tab>Second tab</Tab>
    <Tab>Third tab</Tab>
  </TabList>
  <TabPanel value={0}>
    <b>First</b> tab panel
  </TabPanel>
  <TabPanel value={1}>
    <b>Second</b> tab panel
  </TabPanel>
  <TabPanel value={2}>
    <b>Third</b> tab panel
  </TabPanel>
</Tabs>

按 Enter 键开始编辑

禁用的标签页

使用 disabled 属性禁用交互和焦点。

<Tabs aria-label="Disabled tabs" defaultValue={0}>
  <TabList>
    <Tab>First tab</Tab>
    <Tab disabled>Second tab</Tab>
    <Tab>Third tab</Tab>
  </TabList>
</Tabs>

<Tabs aria-label="Disabled tabs" defaultValue={0}>
  <TabList>
    <Tab>First tab</Tab>
    <Tab disabled>Second tab</Tab>
    <Tab>Third tab</Tab>
  </TabList>
</Tabs>

按 Enter 键开始编辑

自定义

变体

<TabList /> 和 <Tab /> 组件接受全局 variant 属性值。

垂直

在 <Tabs /> 组件上使用 orientation="vertical" 属性使其垂直。使用箭头键的键盘导航会自动适应。

第一个 标签页面板

指示器位置

使用 Tab List 组件上的 underlinePlacement 属性来更改 Tabs 上下划线边框的位置。

underlinePlacement 顶部

使用 indicatorPlacement 属性独立控制选定的 Tab 指示器。

indicatorPlacement 顶部

根据下划线和选定指示器的位置，您可能需要更改 Tabs 组件的 flex 方向。

Flex 方向

位置

标签页 A 的内容

粘性

使用 sticky 属性将 Tab List 组件锚定在顶部或底部。这非常适合涉及较长内容的用例。

长内容

Tab flex

在 Tab List 组件上使用 tabFlex 属性使 Tab 元素填充可用空间，如下例所示。

在第一个演示中，Tab 元素使用 tabFlex={1} 填充可用空间。
在第二个演示中，Tab 元素使用 tabFlex="auto" 平均填充可用空间，但每个元素的宽度都基于其内容。

图标

由于 Tab List 组件使用与List 组件相同的样式，因此您可以直接将图标用作子项，或者将 List Item Decorator 与文本一起使用。

<Tabs aria-label="Icon tabs" defaultValue={0}>
  <TabList>
    <Tab>
      <PhoneIcon />
    </Tab>
    <Tab>
      <FavoriteIcon />
    </Tab>
    <Tab>
      <PersonPinIcon />
    </Tab>
  </TabList>
</Tabs>

<Tabs aria-label="Icon tabs" defaultValue={0}>
  <TabList>
    <Tab>
      <PhoneIcon />
    </Tab>
    <Tab>
      <FavoriteIcon />
    </Tab>
    <Tab>
      <PersonPinIcon />
    </Tab>
  </TabList>
</Tabs>

按 Enter 键开始编辑

可滚动标签页

将 overflow: auto 属性添加到 Tab List 组件，使标签页可滚动。

通过使用 '&::-webkit-scrollbar': { display: 'none' } 隐藏滚动条进一步润色，并使用 CSS 滚动捕捉属性将滚动捕捉到 Tab List 组件的边缘。

<Tabs aria-label="Scrollable tabs" defaultValue={0} sx={{ width: 400 }}>
  <TabList
    sx={{
      overflow: 'auto',
      scrollSnapType: 'x mandatory',
      '&::-webkit-scrollbar': { display: 'none' },
    }}
  >
    {[...Array(20)].map((_, index) => (
      <Tab key={index} sx={{ flex: 'none', scrollSnapAlign: 'start' }}>
        Tab #{index + 1}
      </Tab>
    ))}
  </TabList>
</Tabs>

<Tabs aria-label="Scrollable tabs" defaultValue={0} sx={{ width: 400 }}>
  <TabList
    sx={{
      overflow: 'auto',
      scrollSnapType: 'x mandatory',
      '&::-webkit-scrollbar': { display: 'none' },
    }}
  >
    {[...Array(20)].map((_, index) => (
      <Tab key={index} sx={{ flex: 'none', scrollSnapAlign: 'start' }}>
        Tab #{index + 1}
      </Tab>
    ))}
  </TabList>
</Tabs>

按 Enter 键开始编辑

CSS 变量 Playground

随意调整滑块组件中所有可用的 CSS 变量，以查看设计如何变化。

您可以使用它们在 sx 属性和主题上自定义组件。

标签页 A 内容

<Tabs >

CSS 变量

--Tabs-spacing

控制 TabList 的间距和 TabPanel 的内边距。

--Tab-indicatorThickness

--Tab-indicatorSize

--Tab-indicatorRadius

常见示例

分段控件

要模拟 iOS 的分段控件，请向 Tab List 组件添加 border-radius，并将选定的 Tab 背景设置为 background.surface。

浏览器标签页

在此示例中，Tab 的 variant 属性设置为 outlined，指示器通过 indicatorPlacement="top" 移动到顶部。然后，根据选定状态将边框设置为 transparent。

定价标签页

此示例通过定位 aria-selected="true" 属性来删除选定 Tab 的背景。

开始使用行业标准的 React UI 库，MIT 许可。

$0 －永久免费

居中标签页

要将 Tab 组件在 Tab List 中居中，请添加 flex: initial 属性以覆盖默认的 flex-grow 行为。然后，在列表上，添加 justifyContent: center。

优惠

在此示例中，每个 Tab 在选中时都使用主题中的颜色绘制。

无障碍性

为确保适当的无障碍性，WAI-ARIA 创作实践建议将标签与 Tabs 组件关联。有两种方法可以实现这一点

使用 id 属性

在标签页附近添加一个带有 id 属性的文本元素。然后将 aria-labelledby 属性添加到 Tabs 组件。确保为两者使用有意义的标签。

<Typography id="tabs-accessibility-label">Meaningful label</Typography>
<Tabs aria-labelledby="tabs-accessibility-label">...</Tabs>

使用 aria-label

如果 Tabs 组件没有文本元素，请直接使用 aria-label 属性，使其可被屏幕阅读器读取。

<Tabs aria-label="Meaningful label">...</Tabs>

无样式

使用 Base UI Tabs 来完全拥有组件的设计，而无需覆盖 Material UI 或 Joy UI 样式。此组件的无样式版本是需要重度自定义且捆绑包尺寸更小的理想选择。

API

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