> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.manicule.dev/zh/llms.txt
> Use this file to discover all available pages before exploring further.
> For every page in one file, fetch https://mintlify.manicule.dev/zh/llms-full.txt (large).
> To search and read these docs as tools, connect the MCP server at https://mintlify.manicule.dev/api/mcp.
> Every agent surface: https://mintlify.manicule.dev/.well-known/llms-manifest.json

# 选项卡 (/zh/components/tabs)

<!-- agent-signals: reading_time_min: 1 · est_tokens: 659 · updated: 2026-07-31 -->
Related: [折叠面板](/zh/components/accordions.md), [徽章](/zh/components/badge.md), [横幅](/zh/components/banner.md), [标注框](/zh/components/callouts.md), [卡片](/zh/components/cards.md), [代码分组](/zh/components/code-groups.md)

> 使用 tab 组件将内容组织成可切换的面板，用于展示不同选项、平台版本或语言示例。

使用选项卡将内容组织为多个面板，用户可以在它们之间切换。你可以添加任意数量的选项卡，并在每个选项卡内包含其他组件。

<Tabs>
  <Tab title="第一个标签页">
    ☝️ 欢迎来到只能在第一个标签页中看到的内容。

    你可以在选项卡中添加任意数量的组件。例如，一个代码块：

    ```java title="HelloWorld.java"
      class HelloWorld {
          public static void main(String[] args) {
              System.out.println("Hello, World!");
          }
      }
    ```
  </Tab>

  <Tab title="第二个标签页" icon="leaf">
    ✌️ 这里是只在第二个标签页中的内容。

    这个还带有一个 <Icon icon="leaf" /> 图标！
  </Tab>

<Tab title="第三个标签页">💪 这里是只在第三个标签页中的内容。</Tab>
</Tabs>

````mdx title="Tabs example"
<Tabs>
  <Tab title="第一个标签页">
    ☝️ 欢迎来到只能在第一个标签页中看到的内容。

    你可以在选项卡中添加任意数量的组件。例如,一个代码块:
    ```java HelloWorld.java
      class HelloWorld {
          public static void main(String[] args) {
              System.out.println("Hello, World!");
          }
      }
    ```
  </Tab>
  <Tab title="Second tab" icon="leaf">
    ✌️ Here's content that's only inside the second tab.

    This one has a <Icon icon="leaf" /> icon!
  </Tab>
  <Tab title="Third tab">
    💪 Here's content that's only inside the third tab.
  </Tab>
</Tabs>
````

具有相同标题的 Tabs 会在整个页面中保持同步。比如，如果你有多个标签页分组都包含一个 `JavaScript` 标签页标题，在其中一个标签页分组中选择 `JavaScript` 时，其他分组中的 `JavaScript` 也会自动被选中。这样，用户只需选择一次语言或框架，就能在所有地方看到相同的选择。Tabs 也会与具有相同标题的[代码分组](/zh/components/code-groups)同步。

要禁用标签页同步，在 `<Tabs>` 组件上添加 `sync={false}`。

```mdx title="Disable tab sync example"
<Tabs sync={false}>
  <Tab title="第一个标签页">
    此选项卡组独立运行。
  </Tab>
  <Tab title="第二个标签页">
    在此处选择标签页不会影响其他选项卡组。
  </Tab>
</Tabs>
```

<div id="tabs-properties">
  ## Tabs 属性
</div>

在 `<Tabs>` 包装组件上设置这些属性。

<ResponseField name="defaultTabIndex" type="number" default="0">默认显示的标签页索引（从零开始）。例如，设置为 `1` 可在页面加载时显示第二个标签页。</ResponseField>

<ResponseField name="sync" type="boolean" default="true">当为 `true` 时，标签页会与页面上其他具有相同标题的标签页和代码组保持同步。将其设置为 `false` 可使标签页彼此独立。</ResponseField>

<ResponseField name="borderBottom" type="boolean">为标签页容器添加底部边框和内边距。可用于在视觉上将标签页内容与页面其余部分区分开来，尤其是在标签页包含不同长度的内容时。</ResponseField>

<div id="tab-properties">
  ## Tab 属性
</div>

在每个单独的 `<Tab>` 组件上设置这些属性。

<ResponseField name="title" type="string" required>标签页的标题。较短的标题更便于导航。标题相同的标签页会同步其选中状态。</ResponseField>

<ResponseField name="id" type="string">用于锚点链接的标签页自定义 ID。若未提供，则默认与 `title` 的值相同。</ResponseField>

<ResponseField name="icon" type="string">一个 [Font Awesome](https://fontawesome.com/icons) icon、[Lucide](https://lucide.dev/icons) icon、指向 icon 的 URL，或 icon 的相对路径。</ResponseField>

<ResponseField name="iconType" type="string">仅适用于 Font Awesome icon：可选值之一为 `regular`、`solid`、`light`、`thin`、`sharp-solid`、`duotone`、`brands`。</ResponseField>