Tabs

使用 Tabs 组件切换内容

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

First tab

☝️ 欢迎，你只能在第一个标签页中看到这部分内容。

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

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="第二个标签页" icon="leaf">
    ✌️ 这里是只在第二个标签页内的内容。

    这个标签页有一个 <Icon icon="leaf" /> 图标！
  </Tab>
  <Tab title="第三个标签页">
    💪 这里是只在第三个标签页内的内容。
  </Tab>
</Tabs>

​

属性

title · string · required

标签页的标题。标题越短，越便于导航。

icon · string

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

iconType · string

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