Los shortcodes tabs y tab permiten organizar contenido en pestañas seleccionables. Cada grupo mantiene una pestaña activa y procesa su contenido mediante Markdown.
Uso básico #
Envuelve cada pestaña en un shortcode tab dentro de tabs:
{{< tabs >}}
{{< tab "macOS" >}}
Bienvenido a la instalación en macOS
{{< /tab >}}
{{< tab "Linux" >}}
Bienvenido a la instalación en Linux
{{< /tab >}}
{{< tab "Windows" >}}
Bienvenido a la instalación en Windows
{{< /tab >}}
{{< /tabs >}}
Resultado #
Bienvenido a la instalación en macOS
Bienvenido a la instalación en Linux
Bienvenido a la instalación en Windows
Parámetros #
tabs #
| Parámetro | Posición | Tipo | Requerido | Descripción |
|---|---|---|---|---|
class | 0 | string | No | Clase CSS adicional para el contenedor. |
id | — | string | No | Identificador de grupo personalizado para los controles. |
tab #
| Parámetro | Posición | Tipo | Requerido | Descripción |
|---|---|---|---|---|
title | 0 | string | No | Texto de la pestaña. Por defecto: Tab 1, Tab 2, etc. |
Bloques de código #
Si el contenido de una pestaña incluye unicamente un bloque de código, las pestañas se renderizan combinadas con el bloque de código.
{{< tabs >}}
{{< tab "pnpm" >}}
```bash
pnpm add @example/sdk
```
{{< /tab >}}
{{< tab "yarn" >}}
```bash
yarn add @example/sdk
```
{{< /tab >}}
{{< /tabs >}}
Resultado #
pnpm add @example/sdk
yarn add @example/sdk
Restricción de tab #
El shortcode tab debe utilizarse directamente dentro de tabs. Si se utiliza fuera de este contenedor, Hugo detiene la compilación e informa del error correspondiente:
{{< tab "Inválida" >}}
Esta pestaña no es válida.
{{< /tab >}}
Además, tab requiere un identificador de grupo válido para generar los identificadores de sus controles y paneles.