标签页

标签页是用于组织和导航相关内容组之间的 UI 元素。

简介

标签页是使用相关组件的集合实现的

<Tab /> - 标签页元素本身。单击标签页会显示其对应的面板。
<TabsList /> - 容纳标签页的容器。负责处理焦点和标签页之间的键盘导航。
<TabPanel /> - 托管与标签页关联的内容的卡片。
<Tabs /> - 顶级组件，它包裹 Tabs List 和 Tab Panel 组件，以便标签页及其面板可以相互通信。

我的账户页面

组件

import { Tab } from '@mui/base/Tab';
import { TabsList } from '@mui/base/TabsList';
import { TabPanel } from '@mui/base/TabPanel';
import { Tabs } from '@mui/base/Tabs';

默认情况下，Tab 组件及其对应的面板是从零开始索引的（即第一个标签页的 value 为 0，然后是 1、2 等）。单击给定的 Tab 会打开具有相同 value 的面板，这与每个组件嵌套在其容器中的顺序相对应。

虽然不是必需的，但您可以将 value 属性添加到 Tab 和 Tab Panel，以控制这些组件彼此关联的方式。

以下演示省略了 Tab 组件的 value 属性，并且还将 0 定义为 Tabs 组件的 defaultValue，这会将第一个 Tab 和 Panel 设置为默认值

第一页

<Tabs defaultValue={1}>
  <TabsList>
    <Tab value={1}>One</Tab>
    <Tab value={2}>Two</Tab>
    <Tab value={3}>Three</Tab>
  </TabsList>
  <TabPanel value={1}>First page</TabPanel>
  <TabPanel value={2}>Second page</TabPanel>
  <TabPanel value={3}>Third page</TabPanel>
</Tabs>

<Tabs defaultValue={1}>
  <TabsList>
    <Tab value={1}>One</Tab>
    <Tab value={2}>Two</Tab>
    <Tab value={3}>Three</Tab>
  </TabsList>
  <TabPanel value={1}>First page</TabPanel>
  <TabPanel value={2}>Second page</TabPanel>
  <TabPanel value={3}>Third page</TabPanel>
</Tabs>

按 Enter 开始编辑

下一个演示展示了如何将自定义样式应用于一组标签页

第一页

<Tabs defaultValue={1}>
  <TabsList>
    <Tab value={1}>One</Tab>
    <Tab value={2}>Two</Tab>
    <Tab value={3}>Three</Tab>
  </TabsList>
  <TabPanel value={1}>First page</TabPanel>
  <TabPanel value={2}>Second page</TabPanel>
  <TabPanel value={3}>Third page</TabPanel>
</Tabs>

<Tabs defaultValue={1}>
  <TabsList>
    <Tab value={1}>One</Tab>
    <Tab value={2}>Two</Tab>
    <Tab value={3}>Three</Tab>
  </TabsList>
  <TabPanel value={1}>First page</TabPanel>
  <TabPanel value={2}>Second page</TabPanel>
  <TabPanel value={3}>Third page</TabPanel>
</Tabs>

按 Enter 开始编辑

解剖结构

Tab 组件均由一个根插槽组成，没有内部插槽

<div class="Tabs-root">
  <div class="TabsList-root">
    <button class="Tab-root">First tab</button>
    <button class="Tab-root">Second tab</button>
    <button class="Tab-root">Third tab</button>
  </div>
  <div class="TabPanel-root">First panel</div>
  <div class="TabPanel-root">Second panel</div>
  <div class="TabPanel-root">Third panel</div>
</div>

自定义结构

使用 slots 属性覆盖根插槽或任何其他内部插槽

<Tab slots={{ root: 'span' }} />

如果您提供非交互式元素（例如 <span>），则 Tab 组件将自动添加必要的辅助功能属性。

自定义

垂直

Tab 组件可以垂直和水平排列。

垂直排列时，您必须在 <Tabs /> 组件上设置 orientation="vertical"，以便用户可以使用向上和向下箭头键导航（而不是水平标签页的默认从左到右行为）。

第一页

<Tabs defaultValue={0} orientation="vertical">
  <TabsList>
    <Tab>One</Tab>
    <Tab>Two</Tab>
    <Tab>Three</Tab>
  </TabsList>
  <TabPanel value={0}>First page</TabPanel>
  <TabPanel value={1}>Second page</TabPanel>
  <TabPanel value={2}>Third page</TabPanel>
</Tabs>

<Tabs defaultValue={0} orientation="vertical">
  <TabsList>
    <Tab>One</Tab>
    <Tab>Two</Tab>
    <Tab>Three</Tab>
  </TabsList>
  <TabPanel value={0}>First page</TabPanel>
  <TabPanel value={1}>Second page</TabPanel>
  <TabPanel value={2}>Third page</TabPanel>
</Tabs>

按 Enter 开始编辑

与 TypeScript 一起使用

在 TypeScript 中，您可以指定 slots.root 中使用的自定义组件类型作为非样式化组件的泛型参数。这样，您可以安全地直接在组件上提供自定义根的 props

<Tab<typeof CustomComponent> slots={{ root: CustomComponent }} customProp />

这同样适用于特定于自定义原始元素的 props

<Tab<'button'> slots={{ root: 'button' }} onClick={() => {}} />

第三方路由库

标签页的常见用例是实现不需要 HTTP 往返服务器的客户端导航。

Tab 组件提供了 slots 属性来处理此问题，如下所示

当前路由/drafts

收件箱草稿箱回收站

<Router>
  <div>
    <Routes>
      <Route path="*" element={<CurrentRoute />} />
    </Routes>
    <MyTabs />
  </div>
</Router>

<Router>
  <div>
    <Routes>
      <Route path="*" element={<CurrentRoute />} />
    </Routes>
    <MyTabs />
  </div>
</Router>

按 Enter 开始编辑

无障碍性

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

以下步骤对于使 Tab 组件套件可访问辅助技术是必要的

使用 aria-label 或 aria-labelledby 标记 <Tabs />。
通过设置正确的 id、aria-controls 和 aria-labelledby 将每个 <Tab /> 连接到其对应的 <TabPanel />。

以下演示说明了 ARIA 标签的正确用法。

默认情况下，当使用键盘导航时，Tab 组件通过手动激活打开——也就是说，只有在用户使用 空格键、Enter 键 或鼠标单击激活标签页后，才会显示下一个面板。

根据 WAI-ARIA 创作实践，这在大多数情况下是标签页的首选行为。

或者，您可以设置在对应的标签页获得焦点时自动显示面板——这种选择跟随焦点的行为称为自动激活。

要启用自动激活，请将 selectionFollowsFocus 属性传递给 <Tabs /> 组件

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

以下演示对展示了手动激活和自动激活之间的区别。将焦点移动到任一演示中的标签页，并使用箭头键导航以观察差异

选择跟随焦点

选择独立于焦点（默认行为）