标签页组件

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

用法

第一个标签页

第二个标签页

第三个标签页

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

Markdown

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

变体

语言同步

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

TypeScript

Python

Java

1 console.log("First code block!");

TypeScript

Python

Java

1 console.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 属性的标签页

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

TypeScript

Python

Java

1 console.log("First code block!");

TypeScript

Python

Java

1 console.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 和组件。

string

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

className

string

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

`<TabGroup>` 属性

className

string

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

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

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>

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>

用法

第一个标签页

第二个标签页

第三个标签页

变体

语言同步

TypeScript

Python

Java

TypeScript

Python

Java

不带 language 属性的标签页

TypeScript

Python

Java

TypeScript

Python

Java

链接到特定语言的内容

属性

<TabGroup> 属性

用法

第一个标签页

第二个标签页

第三个标签页

变体

语言同步

TypeScript

Python

Java

TypeScript

Python

Java

不带 language 属性的标签页

TypeScript

Python

Java

TypeScript

Python

Java

链接到特定语言的内容

属性

<TabGroup> 属性

`<TabGroup>` 属性

`<TabGroup>` 属性