🚧 Rspress 2.0 document is under development
close
Rspress
  • English

      • PageTabs

      Info

      The PageTabs component creates sub-tabs within a page, allowing a single page to be split into multiple sub-pages. Each page may contain exactly one PageTabs.

      API
      How it works

      Basic usage

      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>

      Using MDX fragments

      It's recommended to use MDX fragments to split a page into multiple sub-pages.

      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

      Based on extensive feedback from V1 users, we found that users often encountered issues with incorrect static TOC extraction when using MDX fragments that include headers.

      Rspress V2 introduces Dynamic TOC, which dynamically generates the TOC at runtime by monitoring DOM changes through MutationObserver. This ensures TOC accuracy and allows users to leverage the full flexibility of MDX fragments. This also makes the <PageTabs /> component possible.

      import { useDynamicTOC } from '@theme';