docs: update

web-infra-dev · Feb 6, 2025 · a59b362 · a59b362
1 parent f489423
commit a59b362
Show file tree

Hide file tree

Showing 2 changed files with 121 additions and 45 deletions.
diff --git a/packages/document/docs/en/fragments/builtin-components.mdx b/packages/document/docs/en/fragments/builtin-components.mdx
@@ -1,3 +1,7 @@
+:::info Note
+In order to make it easier for you to use these components, the `rspress/theme` package has been aliased inside Rspress, so you can directly use `@theme` to import these components.
+:::
+
 ## Badge
 
 The Badge component is used to display a badge. For example:
@@ -447,35 +451,71 @@ Body for Step 1.
 
 ## Tab/Tabs
 
-You can directly use the Tab/Tabs component in the document to achieve the effect of tab switching. For example:
+You can use the `Tab` and `Tabs` component in the document to achieve the effect of tab switching. For example:
 
-```tsx title="index.mdx"
+```mdx title="index.mdx"
 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>
+  <Tab label="Tab 1">Tab 1 content</Tab>
+  <Tab label="Tab 2">Tab 2 content</Tab>
+</Tabs>
 ```
 
 import { Tab, Tabs } from '@theme';
 
 <Tabs>
-  <Tab label="1" value="1">
-    Tab 1 content
+  <Tab label="Tab 1">Tab 1 content</Tab>
+  <Tab label="Tab 2">Tab 2 content</Tab>
+</Tabs>
+
+### Code blocks
+
+Using `Tabs` component to switch multiple code blocks.
+
+````mdx title="index.mdx"
+import { Tab, Tabs } from 'rspress/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>
+````
+
+<Tabs>
+  <Tab label="Tab 1">
+
+```tsx title="src/index.mjs"
+import foo from 'foo';
+import bar from 'bar';
+```
+
   </Tab>
-  <Tab label="2" value="2">
-    Tab 2 content
+  <Tab label="Tab 2">
+
+```tsx title="src/index.cjs"
+const foo = require('foo');
+const bar = require('bar');
+```
+
   </Tab>
 </Tabs>
 
-:::info Note
-In order to make it easier for you to use these components, the `rspress/theme` package has been aliased inside the framework, so you can directly use `@theme` to import these components.
-:::
+### Props
 
 The props type of the Tabs component is as follows:
 
@@ -488,11 +528,9 @@ interface TabsProps {
 }
 ```
 
-`defaultValue` is used to set the tab item selected by default. This value will be compared with the value field of the Tab component props, and if they are equal, the tab will be selected.
-
-`groupId` is used to sync the selected tab item between multiple Tabs components.The groups with the same groupId will be synchronized.
-
-`tabPosition` is used to set the position of the tab list, it has two values: `left` and `center`, the default is `left`.
+- `defaultValue` is used to set the tab item selected by default. This value will be compared with the value field of the Tab component props, and if they are equal, the tab will be selected.
+- `groupId` is used to sync the selected tab item between multiple Tabs components.The groups with the same groupId will be synchronized.
+- `tabPosition` is used to set the position of the tab list, it has two values: `left` and `center`, the default is `left`.
 
 The props types of the Tab component are as follows:
 

diff --git a/packages/document/docs/zh/fragments/builtin-components.mdx b/packages/document/docs/zh/fragments/builtin-components.mdx
@@ -1,3 +1,7 @@
+:::info 提醒
+为了让用户更方便地使用这些组件，Rspress 内部对于 `rspress/theme` 这个包做了 alias 处理，所以你可以直接使用 `@theme` 来引入这些组件。
+:::
+
 ## Badge
 
 Badge 组件用于展示状态的标记。使用方法如下：
@@ -442,37 +446,73 @@ import { Steps } from '@theme';
 
 ## Tab/Tabs
 
-你可以在文档中直接使用 Tab/Tabs 组件来实现 tab 切换的效果。比如
+你可以在文档中使用 `Tab` 和 `Tabs` 组件来实现标签页切换的效果。比如：
 
-```tsx title="index.tsx"
+```mdx title="index.mdx"
 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>
+  <Tab label="Tab 1">Tab 1 content</Tab>
+  <Tab label="Tab 2">Tab 2 content</Tab>
+</Tabs>
 ```
 
 import { Tab, Tabs } from '@theme';
 
 <Tabs>
-  <Tab label="1" value="1">
-    Tab 1 content
+  <Tab label="Tab 1">Tab 1 content</Tab>
+  <Tab label="Tab 2">Tab 2 content</Tab>
+</Tabs>
+
+### 代码块切换
+
+使用 `Tabs` 组件来切换多个代码块。
+
+````mdx title="index.mdx"
+import { Tab, Tabs } from 'rspress/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>
+````
+
+<Tabs>
+  <Tab label="Tab 1" value="1">
+
+```tsx title="src/index.mjs"
+import foo from 'foo';
+import bar from 'bar';
+```
+
   </Tab>
-  <Tab label="2" value="2">
-    Tab 2 content
+  <Tab label="Tab 2" value="2">
+
+```tsx title="src/index.cjs"
+const foo = require('foo');
+const bar = require('bar');
+```
+
   </Tab>
 </Tabs>
 
-:::info 提醒
-为了让你更方便地使用这些组件，框架内部对于 `rspress/theme` 这个包做了 alias 处理，所以你可以直接使用 `@theme` 来引入这些组件。
-:::
+### Props
 
-其中 Tabs 组件的 props 类型如下:
+Tabs 组件的 props 类型如下:
 
 ```ts
 interface TabsProps {
@@ -483,11 +523,9 @@ interface TabsProps {
 }
 ```
 
-defaultValue 用于设置默认选中的 tab 项，这个值会和 Tab 组件的 value 字段做比较，如果相等则选中该 tab。
-
-groupId 用于设置 tab 项的分组，当你需要多个 Tabs 组件进行联动的时候，可以通过 groupId 来实现。groupId 相同的 Tabs 组件会进行联动。
-
-tabPosition 用于设置 tab 列表的排列位置，目前支持 left 和 center 两个值，分为表示靠左和居中，默认为 left。
+- `defaultValue` 用于设置默认选中的 tab 项，这个值会和 Tab 组件的 value 字段做比较，如果相等则选中该 tab。
+- `groupId` 用于设置 tab 项的分组，当你需要多个 Tabs 组件进行联动的时候，可以通过 groupId 来实现。groupId 相同的 Tabs 组件会进行联动。
+- `tabPosition` 用于设置 tab 列表的排列位置，目前支持 `left` 和 `center` 两个值，分别表示靠左和居中，默认为 `left`。
 
 Tab 组件的 props 类型如下: