Tabs

Cuando tu página ofrece alternativas paralelas — gestores de paquetes, lenguajes de programación, instrucciones específicas del sistema operativo — los Tabs permiten a los lectores elegir una vez y mantenerse en contexto. Los títulos de pestaña 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 a lo largo de la página

Uso

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

Tabs básicos

<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 vs CodeGroup vs Accordion

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

Tabs con iconos

Agrega iconos a los títulos de pestaña 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>

Tabs sincronizados

Los tabs con títulos coincidentes se sincronizan automáticamente en toda la página. Haz clic en "yarn" en un grupo y todos los tabs npm/yarn/pnpm de la página cambian juntos:

Instalar:

npm install my-package

Ejecutar:

npm run dev

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

Props

Tabs

Tab

¿Qué sigue?