Tabs

Alterne conteúdo usando o componente Tabs

Use abas para organizar o conteúdo em vários painéis entre os quais os usuários podem alternar. Você pode adicionar quantas abas quiser e incluir outros componentes dentro de cada uma.

First tab

☝️ Bem-vindo ao conteúdo que você só pode ver dentro da primeira aba.

Você pode adicionar quantos componentes quiser dentro das abas. Por exemplo, um bloco de código:

HelloWorld.java

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

Tabs example

<Tabs>
  <Tab title="First tab">
    ☝️ Bem-vindo ao conteúdo que você só pode ver dentro da primeira aba.

    Você pode adicionar quantos componentes quiser dentro das abas. Por exemplo, um bloco de código:
    ```java HelloWorld.java
      class HelloWorld {
          public static void main(String[] args) {
              System.out.println("Hello, World!");
          }
      }
    ```
  </Tab>
  <Tab title="Second tab" icon="leaf">
    ✌️ Aqui está o conteúdo que fica apenas dentro da segunda aba.

    Esta aqui tem um ícone <Icon icon="leaf" />!
  </Tab>
  <Tab title="Third tab">
    💪 Aqui está o conteúdo que fica apenas dentro da terceira aba.
  </Tab>
</Tabs>

Propriedades

title · string · required

O título da aba. Títulos curtos facilitam a navegação.

icon · string

Um ícone do Font Awesome, do Lucide, uma URL para um ícone ou um caminho relativo para um ícone.

iconType · string

Apenas para ícones do Font Awesome: um dentre regular, solid, light, thin, sharp-solid, duotone, brands.