选项卡

使用 Tabs 组件切换内容

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

第一个标签页

☝️ 欢迎来到仅在第一个标签页内可见的内容。

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

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 · 必填

Tab 的标题。较短的标题更便于导航。

icon · string

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

iconType · string

仅适用于 Font Awesome 的 icon：可为 regular、solid、light、thin、sharp-solid、duotone、brands 之一。