Tabs

Alterna contenido con el componente Tabs

Usa pestañas para organizar contenido en varios paneles entre los que los usuarios pueden alternar. Puedes añadir cualquier número de pestañas e incluir otros componentes dentro de cada una.

First tab

☝️ Bienvenido al contenido que solo puedes ver dentro de la primera pestaña.

Puedes añadir cualquier número de componentes dentro de las pestañas. Por ejemplo, un bloque 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">
    ☝️ Welcome to the content that you can only see inside the first tab.

    You can add any number of components inside of tabs. For example, a code block:
    ```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>

Propiedades

title · string · required

El título de la pestaña. Los títulos cortos facilitan la navegación.

icon · string

Un icono de Font Awesome, de Lucide, una URL a un icono o una ruta relativa a un icono.

iconType · string

Solo para iconos de Font Awesome: uno de regular, solid, light, thin, sharp-solid, duotone, brands.