编写内容组件

标签页组件

以 Markdown 格式查看

<Tabs> 组件可将内容组织到多个独立的标签页中，用户可在标签页之间切换。每个标签页可以包含不同类型的内容，例如示例、代码片段或文档章节。

用法

☝️ 欢迎查看仅在第一个标签页中可见的内容。

Markdown
1<Tabs>
2  <Tab title="第一个标签页">
3    ☝️ 欢迎查看仅在第一个标签页中可见的内容。
4  </Tab>
5  <Tab title="第二个标签页">
6    ✌️ 这是仅在第二个标签页中可见的内容。
7  </Tab>
8  <Tab title="第三个标签页">
9    💪 这是仅在第三个标签页中可见的内容。
10  </Tab>
11  </Tabs>

变体

语言同步

设置了 相同语言 的标签页会在整个文档站点中自动同步。当用户选择某种语言时，所有该语言的标签页都会同步切换。语言偏好会跨浏览器会话保留。

1console.log("First code block!");
1console.log("Second code block – language syncs with the one above!");
Markdown
1<Tabs>
2  <Tab title="TypeScript" language="typescript">
3    ```typescript
4    console.log("Content inside the TypeScript tab");
5    ```
6  </Tab>
7  <Tab title="Python" language="python">
8    ```python
9    print("Content inside the Python tab")
10    ```
11  </Tab>
12  <Tab title="Java" language="java">
13    ```java
14    System.out.println("Content inside the Java tab");
15    ```
16  </Tab>
17</Tabs>

启用了语言的标签页会自动与 相同语言的代码块 同步。

未设置 language 属性的标签页不会与站点中的其他标签页同步。

1console.log("First code block!");
1console.log("Second code block – this won't sync with the one above!");
Markdown
1<Tabs>
2  <Tab title="TypeScript">
3    ```typescript
4    console.log("Content inside the TypeScript tab, with no language property");
5    ```
6  </Tab>
7  <Tab title="Python">
8    ```python
9    print("Content inside the Python tab, with no language property")
10    ```
11  </Tab>
12  <Tab title="Java">
13    ```java
14    System.out.println("Content inside the Java tab, with no language property");
15    ```
16  </Tab>
17</Tabs>

您可以通过在 URL 末尾添加 ?language=<某种语言> 来直接链接到特定语言的内容。这将设置用户访问页面时默认显示的语言标签。

例如，以下链接会默认显示 Java 标签页：https://buildwithfern.com/learn/docs/writing-content/components/tabs?language=java

这适用于具有 language 属性的 CodeBlocks 和 Tab 组件。

属性

title
stringRequired

显示在标签页标题栏中的标题

language
string

与代码块关联的语言。可以使用任意字符串。

当指定后，将启用全局语言同步功能，使所有具有相同 language 值的标签页和代码块保持一致。

children
string | JSXRequired

选中标签页时要显示的内容。可以包含文本、Markdown 和组件。

id
string

标签页的唯一 ID。用于链接和导航。如未指定，将自动生成一个 ID。

className
string

应用于标签页组件的额外 CSS 类名

<TabGroup> 属性

className
string

应用于标签页组的额外 CSS 类名