> ## Documentation Index
> Fetch the complete documentation index at: https://adminroletesting-justin-client-exports.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
# Tabs
> Usa el componente tab para organizar el contenido en paneles intercambiables para mostrar diferentes opciones, versiones de plataforma o ejemplos de idioma.
Usa pestañas para organizar el contenido en varios paneles entre los que los usuarios pueden alternar. Puedes agregar cualquier número de pestañas e incluir otros componentes dentro de cada una.
☝️ Bienvenido al contenido que solo puedes ver dentro de la primera pestaña.
Puedes agregar cualquier número de componentes dentro de las pestañas. Por ejemplo, un bloque de código:
```java HelloWorld.java theme={null}
class HelloWorld {
public static void main(String[] args) {
System.out.println("Hello, World!");
}
}
```
✌️ Aquí tienes contenido que solo está dentro de la segunda pestaña.
¡Esta tiene un !
💪 Aquí tienes contenido que solo está dentro de la tercera pestaña.
````mdx Tabs example theme={null}
☝️ Bienvenido al contenido que solo puedes ver dentro de la primera pestaña.
Puedes agregar cualquier número 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("Hello, World!");
}
}
```
✌️ Here's content that's only inside the second tab.
This one has a icon!
💪 Here's content that's only inside the third tab.
````
Las pestañas con el mismo título se mantienen sincronizadas en toda la página. Por ejemplo, si tienes varios grupos de pestañas que incluyen una pestaña titulada `JavaScript`, al seleccionar `JavaScript` en un grupo de pestañas se selecciona automáticamente `JavaScript` en los demás. Esto ayuda a que los usuarios que eligen un lenguaje o framework una vez vean reflejada esa elección en todas partes. Las pestañas también se sincronizan con los [grupos de código](/es/components/code-groups) que tienen el mismo título.
Para desactivar la sincronización de pestañas, agrega `sync={false}` a un componente ``.
```mdx Disable tab sync example theme={null}
Este grupo de pestañas opera de forma independiente.
Seleccionar pestañas aquí no afectará a otros grupos de pestañas.
```
## Propiedades de Tabs
Configura estas propiedades en el componente contenedor ``.
El índice de la pestaña que se muestra por defecto (basado en cero). Por ejemplo, establécelo en `1` para mostrar la segunda pestaña al cargar la página.
Cuando es `true`, las pestañas se sincronizan con otras pestañas y grupos de código de la página que tengan el mismo título. Establécelo en `false` para que las pestañas sean independientes.
Añade un borde inferior y relleno al contenedor de pestañas. Es útil para separar visualmente el contenido con pestañas del resto de la página, especialmente cuando las pestañas contienen contenido de distinta longitud.
## Propiedades de Tab
Configura estas propiedades en cada componente `` individual.
El título de la pestaña. Los títulos cortos facilitan la navegación. Las pestañas con el mismo título sincronizan sus selecciones.
Un ID personalizado para la pestaña que se usa para enlaces de anclaje. Si no se proporciona, usa por defecto el mismo valor que `title`.
Un icono de [Font Awesome](https://fontawesome.com/icons), un icono de [Lucide](https://lucide.dev/icons), una URL a un icono o una ruta relativa a un icono.
Solo para iconos de Font Awesome: uno de `regular`, `solid`, `light`, `thin`, `sharp-solid`, `duotone`, `brands`.