> For AI agents: the complete documentation index is available at https://rspress.rs/zh/llms.txt, the full documentation bundle is available at https://rspress.rs/zh/llms-full.txt.

# PageTabs

:::info

PageTabs 组件用于在同一页面中创建子标签页，将内容拆分成多个子页面。为了保证锚点跳转和 TOC 生成的正确性，每个页面有且仅允许一个 PageTabs。

:::


API

实现原理

## 基础使用
```mdx title="docs/guide/getting-started.mdx"
# Getting started

import { PageTabs, PageTab } from '@rspress/core/theme';

<PageTabs>
<PageTab label="PageTab 1">

## Foo

</PageTab>

<PageTab label="PageTab 2">

## Bar

</PageTab>
</PageTabs>
```
## 配合 MDX 片段使用
更推荐配合 [MDX 片段] 将一个页面拆分成多个子页面
```mdx title="docs/guide/getting-started.mdx"
# Getting started

import { PageTabs, PageTab } from '@rspress/core/theme';
import Foo from './fragments/_foo.mdx';
import Bar from './fragments/_bar.mdx';

<PageTabs>
  <PageTab label="PageTab 1">
    <Foo />
  </PageTab>
  <PageTab label="PageTab 2">
    <Bar />
  </PageTab>
</PageTabs>
```

## Dynamic TOC
从 V1 用户反馈中，我们发现使用包含标题的 [MDX 片段] 时常常会遇到 TOC 静态提取不正确的问题。
Rspress V2 引入了 Dynamic TOC，在运行时通过 [MutationObserver](https://developer.mozilla.org/zh-CN/docs/Web/API/MutationObserver) 监听 DOM 变化并动态生成 TOC，既保证准确性，也让你可以充分发挥 [MDX 片段] 的灵活性，这也使得 `<PageTabs />` 组件成为可能。
```ts
import { useDynamicTOC } from '@rspress/core/theme';
```

## 


[MDX 片段]: https://rspress.rs/zh/guide/use-mdx/components.md