选项卡

使用选项卡组织内容，以展示不同的选项或版本。

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

第一个标签页

☝️ 欢迎来到只能在第一个标签页中看到的内容。

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

HelloWorld.java

  class HelloWorld {
      public static void main(String[] args) {
          System.out.println("Hello, World!");
      }
  }

第二个标签页

✌️ 这里是只在第二个标签页中的内容。

这个还带有一个 图标！

第三个标签页

💪 这里是只在第三个标签页中的内容。

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 也会与具有相同标题的代码分组同步。

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

Disable tab sync example

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

​

属性

title · string · 必填

标签页的标题。标题越短，越便于导航。标题相同的选项卡会同步其选中状态。

icon · string

一个 Font Awesome icon、Lucide icon、指向图标的 URL，或图标的相对路径。

iconType · string

仅适用于 Font Awesome 图标：可选值之一为 regular、solid、light、thin、sharp-solid、duotone、brands。

sync · boolean · 默认值: "true"

当为 true 时，标签页会与页面上其他具有相同标题的标签页和代码分组保持同步。将其设置为 false 可使标签页彼此独立。

borderBottom · boolean

为标签页容器添加底部边框和内边距。用于在视觉上将标签页中的内容与页面的其他部分区分开来，尤其当各标签页包含的内容长短不一时非常有用。