Pestañas

Cuando tu página ofrece alternativas paralelas (gestores de paquetes, lenguajes de programación, instrucciones específicas de SO), Tabs permite a los lectores elegir una vez y mantener el contexto. Los títulos de pestañas coincidentes se sincronizan automáticamente en toda la página, de modo que seleccionar "yarn" en un grupo cambia todos los demás grupos npm/yarn/pnpm para que coincidan.

Usa Tabs cuando:

• Existen múltiples implementaciones del mismo concepto (npm/yarn/pnpm, JavaScript/Python)
• Las opciones paralelas son mutuamente excluyentes (los usuarios eligen una, no ambas)
• La consistencia importa - la elección del lector debe persistir en toda la página

Uso

<Tabs>
  <Tab title="npm">npm install jamdesk</Tab>
  <Tab title="pnpm">pnpm add jamdesk</Tab>
</Tabs>

Pestañas básicas

<Tabs>
  <Tab title="First Tab">

    Content for the first tab.

</Tab>
  <Tab title="Second Tab">

    Content for the second tab.

</Tab>
  <Tab title="Third Tab">

    Content for the third tab.

</Tab>
</Tabs>

Tabs frente a CodeGroup y Accordion

Regla general: Usa Tabs cuando la elección del lector (como el gestor de paquetes preferido) deba persistir en toda la página. Usa CodeGroup para comparaciones solo de código. Usa Accordion para contenido que puede ser relevante en su totalidad.

Pestañas con iconos

Agrega iconos a los títulos de pestañas usando iconos de Font Awesome:

function App() {
  return <h1>Hello React</h1>;
}

<Tabs>
  <Tab title="React" icon="react" iconType="brands">

    ```jsx
    function App() {
      return <h1>Hello React</h1>;
    }
    ```

</Tab>
  <Tab title="Vue" icon="vuejs" iconType="brands">

    ```vue
    <template>
      <h1>Hello Vue</h1>
    </template>
    ```

</Tab>
</Tabs>

Borde inferior

Usa la prop borderBottom para agregar un separador visual debajo del contenido de la pestaña:

<Tabs borderBottom>
  <Tab title="Overview">

    This tab group has a bottom border for visual separation.

</Tab>
  <Tab title="Details">

    Useful when tabs contain varying content lengths.

</Tab>
</Tabs>

Pestañas sincronizadas

Las pestañas con títulos coincidentes se sincronizan en toda la página automáticamente. Haz clic en "yarn" en un grupo y todas las pestañas npm/yarn/pnpm de la página cambian juntas:

Instalar:

npm install my-package

Ejecutar:

npm run dev

La sincronización ocurre cuando los títulos de las pestañas coinciden (sin distinguir mayúsculas y minúsculas).

Props

Tabs

Tab

¿Qué sigue?