close
Rspress
  • 中文

      • Tabs/Tab

      Tabs 与 Tab 用于在多个内容面板间切换。

      用法

      Tab 1
      Tab 2
      Tab 1 content
      index.mdx
      import { Tab, Tabs } from '@rspress/core/theme';

<Tabs>
  <Tab label="Tab 1">Tab 1 content</Tab>
  <Tab label="Tab 2">Tab 2 content</Tab>
</Tabs>

      代码块

      Tab 1
      Tab 2
      src/index.mjs
      import foo from 'foo';
import bar from 'bar';
      index.mdx
      import { Tab, Tabs } from '@rspress/core/theme';

<Tabs>
<Tab label="Tab 1">

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

</Tab>
<Tab label="Tab 2">

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

</Tab>
</Tabs>

      分组同步

      使用相同的 groupId，可以让多个 Tabs 共享当前选中的标签。

      npm
      pnpm
      npm install rspress
      npm
      pnpm
      npm run dev
      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>

      自定义标签

      在每个 Tab 上使用 label 可以渲染自定义标签。

      GitHub
      GitLab

      GitHub 仓库设置

      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 预选标签页。

      Apple
      Orange
      Banana
      This is an apple 🍎
      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">This is an apple 🍎</Tab>
  <Tab value="orange">This is an orange 🍊</Tab>
  <Tab value="banana">This is a banana 🍌</Tab>
</Tabs>

      Props

      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 控制标签列表的对齐方式。