Tabs/Tab

Компоненты Tabs и Tab позволяют переключаться между несколькими панелями содержимого.

Использование

index.mdx

import { Tab, Tabs } from '@rspress/core/theme';

<Tabs>
  <Tab label="Tab 1">Содержимое первой вкладки</Tab>
  <Tab label="Tab 2">Содержимое второй вкладки</Tab>
</Tabs>

Блоки кода

index.mdx

import { Tab, Tabs } from '@rspress/core/theme';

<Tabs>
<Tab label="Вкладка 1">

```tsx title="src/index.mjs"
import foo from 'foo';
import bar from 'bar';
```

</Tab>
<Tab label="Вкладка 2">

```tsx title="src/index.cjs"
const foo = require('foo');
const bar = require('bar');
```

</Tab>
</Tabs>

Синхронизация групп

Используйте один и тот же groupId для синхронизации активной вкладки в нескольких компонентах Tabs.

index.mdx

import { Tab, Tabs } from '@rspress/core/theme';

<Tabs groupId="package-manager">
  <Tab label="npm">npm install rspress</Tab>
  <Tab label="pnpm">pnpm add rspress</Tab>
</Tabs>

<Tabs groupId="package-manager">
  <Tab label="npm">npm run dev</Tab>
  <Tab label="pnpm">pnpm dev</Tab>
</Tabs>

Пользовательские метки

Используйте свойство label у каждого Tab, чтобы задать пользовательские заголовки вкладок.

index.mdx

import {
  IconGithub,
  IconGitlab,
  SvgWrapper,
  Tab,
  Tabs,
} from '@rspress/core/theme';

<Tabs>
  <Tab
    label={
      <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
        <SvgWrapper icon={IconGithub} width={16} height={16} />
        GitHub
      </span>
    }
  >
    Настройки репозитория GitHub
  </Tab>
  <Tab
    label={
      <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
        <SvgWrapper icon={IconGitlab} width={16} height={16} />
        GitLab
      </span>
    }
  >
    Настройки проекта GitLab
  </Tab>
</Tabs>

Раздельное задание меток и содержимого

Используйте values для определения заголовков вкладок отдельно от содержимого панелей. Каждый элемент содержит value, а соответствующий <Tab value="..."> предоставляет содержимое. Используйте defaultValue для выбора вкладки по умолчанию по её value.

index.mdx

import { Tab, Tabs } from '@rspress/core/theme';

<Tabs
  defaultValue="apple"
  values={[
    { label: 'Apple', value: 'apple' },
    { label: 'Orange', value: 'orange' },
    { label: 'Banana', value: 'banana' },
  ]}
>
  <Tab value="apple">Это яблоко 🍎</Tab>
  <Tab value="orange">Это апельсин 🍊</Tab>
  <Tab value="banana">Это банан 🍌</Tab>
</Tabs>

Пропсы

interface TabsProps {
  children: React.ReactNode;
  values?: Array<{ label: React.ReactNode; value: string }>;
  defaultIndex?: number;
  defaultValue?: string;
  groupId?: string;
  tabPosition?: 'left' | 'center';
}

interface TabProps {
  label?: React.ReactNode;
  value?: string;
  children: React.ReactNode;
}

label принимает любой отрисовываемый React-узел, поэтому в него можно добавлять иконки или произвольную разметку. Используйте defaultIndex для выбора вкладки по индексу или defaultValue для выбора по value. Параметр groupId синхронизирует выбор между несколькими группами Tabs. Свойство tabPosition задаёт выравнивание списка вкладок.

#Tabs/Tab

#Использование

#Блоки кода

#Синхронизация групп

#Пользовательские метки

#Раздельное задание меток и содержимого

#Пропсы

Tabs/Tab

Использование

Блоки кода

Синхронизация групп

Пользовательские метки

Раздельное задание меток и содержимого

Пропсы