close

    PageTabs экспериментально

    Информация

    Компонент PageTabs создаёт вложенные вкладки внутри страницы, позволяя разделить одну страницу на несколько представлений. Чтобы якоря и оглавление (TOC) работали корректно, на каждой странице может быть ровно один PageTabs.

    API
    Как это работает

    Основы

    docs/guide/getting-started.mdx
    # Первые шаги

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

<PageTabs>
<PageTab label="Вкладка 1">

## Foo

</PageTab>

<PageTab label="Вкладка 2">

## Bar

</PageTab>
</PageTabs>

    Использование MDX-фрагментов

    Рекомендуется использовать MDX-фрагменты для разбиения страницы на несколько подстраниц.

    docs/guide/getting-started.mdx
    # Первые шаги

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

<PageTabs>
  <PageTab label="Вкладка 1">
    <Foo />
  </PageTab>
  <PageTab label="Вкладка 2">
    <Bar />
  </PageTab>
</PageTabs>

    Динамическое оглавление

    На основе обширной обратной связи от пользователей V1 мы обнаружили, что извлечение статичного оглавления часто не работало при использовании фрагментов MDX, содержащих заголовки.

    Rspress V2 представляет Dynamic TOC — динамическое оглавление, которое генерируется во время выполнения путём наблюдения за изменениями DOM с помощью MutationObserver. Это позволяет сохранять оглавление точным, при этом полностью используя возможности фрагментов MDX, что делает возможным компонент <PageTabs />.

    import { useDynamicTOC } from '@rspress/core/theme';