> ## 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.

# Variation

> Utilisez le composant variation pour afficher un contenu conditionnel selon la variation choisie par le lecteur, comme la région, le plan ou l'audience.

Utilisez le composant `Variation` pour afficher ou masquer du contenu selon la variation choisie par le lecteur dans le menu déroulant de variations. Les variations sont utiles quand la même page doit décrire une audience, une région, un niveau d'offre ou une cible de déploiement différents sans dupliquer la page.

<Note>
  Les variations sont disponibles sur le [thème Willow](/fr/customize/themes). Sur les autres thèmes, la configuration et le sélecteur sont ignorés.
</Note>

<div id="configure-variations">
  ## Configurer les variations
</div>

Ajoutez un objet `variations` à votre `docs.json` avec les options entre lesquelles vous voulez que les lecteurs puissent basculer. La première option est la valeur par défaut.

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

<ResponseField name="options" type="array" required>
  Options de variation dans l'ordre d'affichage. La première option est la valeur par défaut. Chaque option nécessite :

  * `id` : Un identifiant stable et unique utilisé dans le composant `Variation` et dans l'URL.
  * `label` : Le nom affiché dans le menu déroulant de variations.
</ResponseField>

Quand `variations` est configuré, un menu déroulant **Variation** apparaît au-dessus du sélecteur de vue existant dans la barre latérale de la table des matières, les panneaux latéraux, les filtres du changelog et en ligne sur mobile.

<div id="use-the-component">
  ## Utiliser le composant
</div>

Enveloppez le contenu conditionnel dans un composant `Variation` et définissez `is` sur l'`id` de l'option qui doit le révéler. Le contenu hors d'un bloc `Variation` est toujours affiché.

```mdx theme={null}
Les deux audiences voient cette introduction.

<Variation is="cloud">
  Connectez-vous sur [app.example.com](https://app.example.com) pour obtenir votre clé API.
</Variation>

<Variation is="self-hosted">
  Générez une clé API depuis la console d'administration de votre instance.
</Variation>
```

Pour partager du contenu entre plusieurs variations, passez un tableau à `is` :

```mdx theme={null}
<Variation is={["cloud", "self-hosted"]}>
  Stockez votre clé API dans la variable d'environnement `EXAMPLE_API_KEY`.
</Variation>
```

<div id="how-readers-switch-variations">
  ## Comment les lecteurs changent de variation
</div>

* Les lecteurs choisissent une variation dans le menu déroulant de la barre latérale de la table des matières.
* La sélection est enregistrée dans le stockage local par projet, ce qui permet aux lecteurs de conserver leur variation en naviguant entre les pages.
* La variation active est reflétée dans l'URL sous la forme `?variation=<id>`, ce qui facilite le partage d'un lien vers une variation précise.

<div id="table-of-contents-behavior">
  ## Comportement de la table des matières
</div>

Les titres à l'intérieur d'un bloc `Variation` sont automatiquement filtrés de la table des matières quand une autre variation est active. Les titres en dehors de tout bloc `Variation` apparaissent toujours.

Les blocs `Variation` imbriqués se croisent : un bloc interne ne s'affiche que si sa valeur `is` est compatible avec tous les blocs englobants.

<div id="properties">
  ## Propriétés
</div>

<ResponseField name="is" type="string ou string[]" required>
  L'`id` de variation (ou le tableau d'ids) qui doit révéler le contenu enveloppé. Les ids doivent correspondre à une option définie dans `variations.options` dans `docs.json`.
</ResponseField>