Pestañas

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 tantas pestañas como necesites e incluir otros componentes dentro de cada una.

Primera pestaña

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

Puedes añadir tantos componentes como quieras 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!");
      }
  }

Segunda pestaña

✌️ Aquí tienes contenido que solo está dentro de la segunda pestaña.

¡Esta tiene un icono !

Tercera pestaña

💪 Aquí tienes contenido que solo está dentro de la tercera pestaña.

Ejemplo de pestañas

<Tabs>
  <Tab title="Primera pestaña">
    ☝️ Bienvenido al contenido que solo puedes ver dentro de la primera pestaña.

    Puedes añadir cualquier cantidad de componentes dentro de las pestañas. Por ejemplo, un bloque de código:
    ```java HelloWorld.java
      class HelloWorld {
          public static void main(String[] args) {
              System.out.println("¡Hola, mundo!");
          }
      }
    ```
  </Tab>
  <Tab title="Segunda pestaña" icon="leaf">
    ✌️ Aquí tienes contenido que solo aparece dentro de la segunda pestaña.

    ¡Esta tiene un <Icon icon="leaf" />!
  </Tab>
  <Tab title="Tercera pestaña">
    💪 Aquí tienes contenido que solo aparece dentro de la tercera pestaña.
  </Tab>
</Tabs>

​

Propiedades

title · string · requerido

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

icon · string

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

iconType · string

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