内置组件#

NoSSR#

用于在服务端渲染时不渲染某些组件。使用方法如下：

import { NoSSR } from 'rspress/runtime';

const Component = () => {
  return (
    <NoSSR>
      <div>这里的内容只会在客户端渲染</div>
    </NoSSR>
  );
};

Tab/Tabs#

你可以在文档中直接使用 Tab/Tabs 组件来实现 tab 切换的效果。比如

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

function App() {
  return (
    <Tabs>
      <Tab label="Tab 1">Tab 1 content</Tab>
      <Tab label="Tab 2">Tab 2 content</Tab>
    </Tabs>
  );
}

其中 Tabs 组件的 props 类型如下:

interface TabsProps {
  children: React.ReactNode;
  defaultValue?: string;
  groupId?: string;
}

defaultValue 用于设置默认选中的 tab 项，这个值会和 Tab 组件的 value 字段做比较，如果相等则选中该 tab。

groupId 用于设置 tab 项的分组，当你需要多个 Tabs 组件进行联动的时候，可以通过 groupId 来实现。groupId 相同的 Tabs 组件会进行联动。

Tab 组件的 props 类型如下:

interface TabProps {
  label: string;
  // 用于标识当前 tab，如果不传则默认使用 label
  value?: string;
  children: React.ReactNode;
}

其中的 value 字段用于标识当前 tab，如果不传则默认使用 label。

PackageManagerTabs#

PackageManagerTabs 组件用于在文档中展示不同包管理器的命令。使用方法如下：

import { PackageManagerTabs } from '@theme';

function App() {
  return <PackageManagerTabs command="install rspress -D" />;
}

效果如下：

npm install rspress -D

其中包含的 props 类型如下：

interface PackageManagerTabsProps {
  command:
    | string
    | {
        // 用于设置不同包管理器的命令
        npm?: string;
        yarn?: string;
        pnpm?: string;
        bun?: string;
      };
  // 用于设置额外的 tab
  additionalTabs: {
    // 用于设置额外的包管理器
    tool: string;
    // 用于设置包管理器的 icon
    icon?: React.ReactNode;
  }[];
}

当 command 设置为字符串时，会默认展示 npm、yarn、pnpm、bun 四个 tab，并且组件内部为自动在 command 前面添加对应的包管理器命令。如果你需要展示额外的 tab，可以通过 additionalTabs 来实现。

Table of Contents#

渲染当前页面的 TOC

import { Toc } from '@theme';

function App() {
  return (
    <Toc />
  );
}

• NoSSR
• Tab/Tabs
• PackageManagerTabs
• Table of Contents