> ## Documentation Index
> Fetch the complete documentation index at: https://tomee-mintlify-038c04aa.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Variación

> Usa el componente variation para mostrar contenido de forma condicional según la variación elegida por el lector, como región, plan o audiencia.

Usa el componente `Variation` para mostrar u ocultar contenido según la variación que el lector seleccione en el menú desplegable de variaciones. Las variaciones son útiles cuando la misma página debe describir una audiencia, región, nivel de plan o entorno de despliegue distintos sin duplicar la página.

<Note>
  Las variaciones están disponibles en el [tema Willow](/es/customize/themes). En otros temas, se ignoran la configuración y el selector.
</Note>

<div id="configure-variations">
  ## Configurar variaciones
</div>

Añade un objeto `variations` en tu `docs.json` con las opciones entre las que quieres que los lectores puedan cambiar. La primera opción es la predeterminada.

```json docs.json theme={null}
{
  "theme": "willow",
  "variations": {
    "options": [
      { "id": "cloud", "label": "Cloud" },
      { "id": "self-hosted", "label": "Autohospedado" }
    ]
  }
}
```

<ResponseField name="options" type="array" required>
  Opciones de variación en el orden en que se muestran. La primera opción es la predeterminada. Cada opción requiere:

  * `id`: Un identificador único y estable que se usa en el componente `Variation` y en la URL.
  * `label`: El nombre visible en el menú desplegable de variaciones.
</ResponseField>

Cuando `variations` está configurado, aparece un menú desplegable de **Variación** encima del selector de vistas existente en la barra lateral del índice, en los paneles laterales, en los filtros del changelog y en línea en móviles.

<div id="use-the-component">
  ## Usar el componente
</div>

Envuelve el contenido condicional en un componente `Variation` y establece `is` con el `id` de la opción que debe revelarlo. El contenido fuera de un bloque `Variation` se muestra siempre.

```mdx theme={null}
Ambas audiencias ven esta introducción.

<Variation is="cloud">
  Inicia sesión en [app.example.com](https://app.example.com) para obtener tu clave de API.
</Variation>

<Variation is="self-hosted">
  Genera una clave de API desde la consola de administración de tu instancia.
</Variation>
```

Para compartir contenido entre varias variaciones, pasa un array a `is`:

```mdx theme={null}
<Variation is={["cloud", "self-hosted"]}>
  Guarda tu clave de API en la variable de entorno `EXAMPLE_API_KEY`.
</Variation>
```

<div id="how-readers-switch-variations">
  ## Cómo cambian de variación los lectores
</div>

* Los lectores eligen una variación en el menú desplegable de la barra lateral del índice.
* La selección se guarda en el almacenamiento local por proyecto, por lo que los lectores mantienen su variación al navegar entre páginas.
* La variación actual se refleja en la URL como `?variation=<id>`, lo que facilita compartir un enlace a una variación concreta.

<div id="table-of-contents-behavior">
  ## Comportamiento del índice
</div>

Los encabezados dentro de un bloque `Variation` se filtran automáticamente del índice cuando hay otra variación activa. Los encabezados fuera de cualquier bloque `Variation` siempre aparecen.

Los bloques `Variation` anidados se intersectan: un bloque interno solo se muestra cuando su valor de `is` es compatible con todos los bloques que lo contienen.

<div id="properties">
  ## Propiedades
</div>

<ResponseField name="is" type="string o string[]" required>
  El `id` de variación (o el array de ids) que debe revelar el contenido envuelto. Los ids deben coincidir con una opción definida en `variations.options` en `docs.json`.
</ResponseField>