PageTabs
Info
PageTabs 组件创建子标签页，可以将一个页面内容拆分成多个子页面，为了保证锚点跳转和 TOC 生成的正确性，每个页面有且仅允许一个 PageTabs。
API
实现原理
基础使用
docs/guide/getting-started.mdx
# Getting started
import { PageTabs, PageTab } from '@theme';
<PageTabs>
<PageTab label="PageTab 1">
## Foo
</PageTab>
<PageTab label="PageTab 2">
## Bar
</PageTab>
</PageTabs>配合 MDX 片段使用
更推荐配合 MDX 片段 将一个页面拆分成多个子页面
docs/guide/getting-started.mdx
# Getting started
import { PageTabs, PageTab } from '@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 片段 并包含 Header 时常常会遇到 TOC 静态提取不正确的问题。
Rspress V2 中引入了 Dynamic TOC，在运行时通过 MutationObserver 监听 DOM 变化，动态生成 TOC，保证了 TOC 的正确，使用户可以发挥 MDX 片段 的最大灵活性。这也使得 <PageTabs /> 组件成为可能。
import { useDynamicTOC } from '@theme';