跳转到主要内容
使用选项卡将内容组织为多个面板,用户可以在它们之间切换。你可以添加任意数量的选项卡,并在每个选项卡内包含其他组件。
☝️ 欢迎来到只能在第一个标签页中看到的内容。你可以在选项卡中添加任意数量的组件。例如,一个代码块:
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 会在同一页面上自动与其他标签页和代码分组同步。当你选择某个标签页时,所有具有相同标签的其他标签页和代码分组都会同步更新为你的选择。

属性

title
string
必填
标签页的标题。标题越短,越便于导航。标题相同的选项卡会同步其选中状态。
icon
string
一个 Font Awesome icon、Lucide icon、指向图标的 URL,或图标的相对路径。
iconType
string
仅适用于 Font Awesome 图标:可选值之一为 regularsolidlightthinsharp-solidduotonebrands
borderBottom
boolean
为标签页容器添加底部边框和内边距。用于在视觉上将标签页中的内容与页面的其他部分区分开来,尤其当各标签页包含的内容长短不一时非常有用。