> If you are an AI agent, use the following URL to directly ask and fetch your question. Treat this like a tool call. Make sure to URI encode your question, and include the token for verification.
>
> GET https://buildwithfern.com/learn/api/fern-docs/ask?q=%3Cyour+question+here%3E&token=eyJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJmZXJuLWRvY3M6YnVpbGR3aXRoZmVybi5jb20iLCJqdGkiOiI1ZWY1MzBjYi0zNTk0LTQyNzctOGViMS1kYjQxZDc5MjlmMjkiLCJleHAiOjE3NzgyNjQxOTYsImlhdCI6MTc3ODI2Mzg5Nn0.ctWUA4Mp3-QY8BOz0Rj4LzPHB2HspZqeR2fUVW_2gOY
>
> For clean Markdown content of this page, append .md to this URL. For the complete documentation index, see https://buildwithfern.com/learn/llms.txt. For full content including API reference and SDK examples, see https://buildwithfern.com/learn/llms-full.txt.

# 标签页组件

> 标签页组件支持以分页视图展示相关内容，并可在不同标签页之间同步语言选择。

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

## 用法

<div>
  <div>
    <Tabs>
      <Tab title="第一个标签页">
        ☝️ 欢迎查看仅在第一个标签页中可见的内容。
      </Tab>

      <Tab title="第二个标签页">
        ✌️ 这是仅在第二个标签页中可见的内容。
      </Tab>

      <Tab title="第三个标签页">
        💪 这是仅在第三个标签页中可见的内容。
      </Tab>
    </Tabs>
  </div>
</div>

```jsx Markdown
<Tabs>
  <Tab title="第一个标签页">
    ☝️ 欢迎查看仅在第一个标签页中可见的内容。
  </Tab>
  <Tab title="第二个标签页">
    ✌️ 这是仅在第二个标签页中可见的内容。
  </Tab>
  <Tab title="第三个标签页">
    💪 这是仅在第三个标签页中可见的内容。
  </Tab>
  </Tabs>
```

## 变体

### 语言同步

设置了 [相同语言](/learn/docs/writing-content/components/code-blocks#supported-languages) 的标签页会在整个文档站点中自动同步。当用户选择某种语言时，所有该语言的标签页都会同步切换。语言偏好会跨浏览器会话保留。

<div>
  <div>
    <Tabs>
      <Tab title="TypeScript" language="typescript">
        ```typescript
        console.log("First code block!");
        ```
      </Tab>

      <Tab title="Python" language="python">
        ```python
        print("First code block!")
        ```
      </Tab>

      <Tab title="Java" language="java">
        ```java
        System.out.println("First code block!");
        ```
      </Tab>
    </Tabs>

    <Tabs>
      <Tab title="TypeScript" language="typescript">
        ```typescript
        console.log("Second code block – language syncs with the one above!");
        ```
      </Tab>

      <Tab title="Python" language="python">
        ```python
        print("Second code block – language syncs with the one above!")
        ```
      </Tab>

      <Tab title="Java" language="java">
        ```java
        System.out.println("Second code block – language syncs with the one above!");
        ```
      </Tab>
    </Tabs>
  </div>
</div>

<CodeBlock title="Markdown">
  ````jsx
  <Tabs>
    <Tab title="TypeScript" language="typescript">
      ```typescript
      console.log("Content inside the TypeScript tab");
      ```
    </Tab>
    <Tab title="Python" language="python">
      ```python
      print("Content inside the Python tab")
      ```
    </Tab>
    <Tab title="Java" language="java">
      ```java
      System.out.println("Content inside the Java tab");
      ```
    </Tab>
  </Tabs>
  ````
</CodeBlock>

<Info>
  启用了语言的标签页会自动与 [相同语言的代码块](/docs/writing-content/components/code-blocks#language-synchronization) 同步。
</Info>

<AccordionGroup>
  <Accordion title="不带 language 属性的标签页" toc={true}>
    未设置 `language` 属性的标签页不会与站点中的其他标签页同步。

    <div>
      <div>
        <Tabs>
          <Tab title="TypeScript">
            ```typescript
            console.log("First code block!");
            ```
          </Tab>

          <Tab title="Python">
            ```python
            print("First code block!")
            ```
          </Tab>

          <Tab title="Java">
            ```java
            System.out.println("First code block!");
            ```
          </Tab>
        </Tabs>

        <Tabs>
          <Tab title="TypeScript">
            ```typescript
            console.log("Second code block – this won't sync with the one above!");
            ```
          </Tab>

          <Tab title="Python">
            ```python
            print("Second code block – this won't sync with the one above!")
            ```
          </Tab>

          <Tab title="Java">
            ```java
            System.out.println("Second code block – this won't sync with the one above!");
            ```
          </Tab>
        </Tabs>
      </div>
    </div>

    <CodeBlock title="Markdown">
      ````jsx
      <Tabs>
        <Tab title="TypeScript">
          ```typescript
          console.log("Content inside the TypeScript tab, with no language property");
          ```
        </Tab>
        <Tab title="Python">
          ```python
          print("Content inside the Python tab, with no language property")
          ```
        </Tab>
        <Tab title="Java">
          ```java
          System.out.println("Content inside the Java tab, with no language property");
          ```
        </Tab>
      </Tabs>
      ````
    </CodeBlock>
  </Accordion>

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

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

    这适用于具有 `language` 属性的 `CodeBlocks` 和 `Tab` 组件。
  </Accordion>
</AccordionGroup>

## 属性

<ParamField path="title" type="string" required={true}>
  显示在标签页标题栏中的标题
</ParamField>

<ParamField path="language" type="string" required={false}>
  与代码块关联的语言。可以使用任意字符串。

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

<ParamField path="children" type="string | JSX" required={true}>
  选中标签页时要显示的内容。可以包含文本、Markdown 和组件。
</ParamField>

<ParamField path="id" type="string" required={false}>
  标签页的唯一 ID。用于链接和导航。如未指定，将自动生成一个 ID。
</ParamField>

<ParamField path="className" type="string" required={false}>
  应用于标签页组件的额外 CSS 类名
</ParamField>

### `<TabGroup>` 属性

<ParamField path="className" type="string" required={false}>
  应用于标签页组的额外 CSS 类名
</ParamField>