mirror of
https://github.com/mintlify/docs.git
synced 2026-09-14 13:35:46 +08:00
mintlify[bot]
4b465465dd
Generated-By: mintlify-agent Co-authored-by: mintlify[bot] <109931778+mintlify[bot]@users.noreply.github.com>
114 lines
4.6 KiB
Plaintext
114 lines
4.6 KiB
Plaintext
---
|
|
title: "Tabs"
|
|
description: "Usa el componente tab para organizar el contenido en paneles intercambiables para mostrar diferentes opciones, versiones de plataforma o ejemplos de idioma."
|
|
keywords: ["tabbed content", "content panels", "switchable content"]
|
|
boost: 3
|
|
---
|
|
|
|
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.
|
|
|
|
<Tabs>
|
|
<Tab title="Primera pestaña">
|
|
☝️ 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!");
|
|
}
|
|
}
|
|
```
|
|
</Tab>
|
|
|
|
<Tab title="Segunda pestaña" icon="leaf">
|
|
✌️ Aquí tienes contenido que solo está dentro de la segunda pestaña.
|
|
|
|
¡Esta tiene un <Icon icon="leaf" />!
|
|
</Tab>
|
|
|
|
<Tab title="Tercera pestaña">
|
|
💪 Aquí tienes contenido que solo está dentro de la tercera pestaña.
|
|
</Tab>
|
|
</Tabs>
|
|
|
|
````mdx Tabs example
|
|
<Tabs>
|
|
<Tab title="Primera pestaña">
|
|
☝️ 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!");
|
|
}
|
|
}
|
|
```
|
|
</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>
|
|
````
|
|
|
|
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 `<Tabs>`.
|
|
|
|
```mdx Disable tab sync example
|
|
<Tabs sync={false}>
|
|
<Tab title="Primera pestaña">
|
|
Este grupo de pestañas opera de forma independiente.
|
|
</Tab>
|
|
<Tab title="Segunda pestaña">
|
|
Seleccionar pestañas aquí no afectará a otros grupos de pestañas.
|
|
</Tab>
|
|
</Tabs>
|
|
```
|
|
|
|
<div id="tabs-properties">
|
|
## Propiedades de Tabs
|
|
</div>
|
|
|
|
Configura estas propiedades en el componente contenedor `<Tabs>`.
|
|
|
|
<ResponseField name="defaultTabIndex" type="number" default="0">
|
|
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.
|
|
</ResponseField>
|
|
|
|
<ResponseField name="sync" type="boolean" default="true">
|
|
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.
|
|
</ResponseField>
|
|
|
|
<ResponseField name="borderBottom" type="boolean">
|
|
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.
|
|
</ResponseField>
|
|
|
|
<div id="tab-properties">
|
|
## Propiedades de Tab
|
|
</div>
|
|
|
|
Configura estas propiedades en cada componente `<Tab>` individual.
|
|
|
|
<ResponseField name="title" type="string" required>
|
|
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.
|
|
</ResponseField>
|
|
|
|
<ResponseField name="id" type="string">
|
|
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`.
|
|
</ResponseField>
|
|
|
|
<ResponseField name="icon" type="string">
|
|
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.
|
|
</ResponseField>
|
|
|
|
<ResponseField name="iconType" type="string">
|
|
Solo para iconos de Font Awesome: uno de `regular`, `solid`, `light`, `thin`, `sharp-solid`, `duotone`, `brands`.
|
|
</ResponseField> |