# Vue (/fr/components/view)

<!-- agent-signals: reading_time_min: 2 · est_tokens: 745 · updated: 2026-09-23 -->
Related: [Accordion](/fr/components/accordions.md), [Badge](/fr/components/badge.md), [Bannière](/fr/components/banner.md), [Encarts](/fr/components/callouts.md), [Cartes](/fr/components/cards.md), [Groupes de code](/fr/components/code-groups.md)

Utilisez le composant `View` pour créer du contenu qui change en fonction de la vue sélectionnée dans un menu déroulant à vues multiples. C’est particulièrement utile pour afficher des exemples de code ou une documentation spécifique à différents langages de programmation ou frameworks.

Mintlify construit automatiquement le menu déroulant multi‑vue à partir du `title` de chaque composant `View` de la page. Vous n’avez pas à configurer le menu déroulant séparément. Utilisez un `View` par titre et par page : les titres en double sont ignorés, et un `View` sans titre n’est jamais affiché.

<Tip>
  Utilisez un composant `View` par langage et par page. Utilisez des [onglets](/fr/components/tabs) pour les procédures qui diffèrent selon le langage et des [groupes de code](/fr/components/code-groups) pour les exemples de code qui diffèrent selon le langage.
</Tip>

**JavaScript**

Ce contenu est visible uniquement lorsque JavaScript est sélectionné.

```javascript
console.log("Hello from JavaScript!");
```

**Python**

Ce contenu est visible uniquement lorsque Python est sélectionné.

```python
print("Hello from Python!")
```

<div id="example">
  ## Exemple [#exemple]
</div>

````mdx title="JavaScript and Python views"
<View title="JavaScript" icon="js">
  Ce contenu est visible uniquement lorsque JavaScript est sélectionné.

  ```javascript
  console.log("Hello from JavaScript!");
  ```
</View>

<View title="Python" icon="python">
  Ce contenu est visible uniquement lorsque Python est sélectionné.

  ```python
  print("Hello from Python!")
  ```
</View>
````

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

La table des matières se met à jour automatiquement pour n’afficher que les titres de la vue actuellement sélectionnée. Lorsque vous changez de vue à l’aide du menu déroulant multivues, la table des matières se rafraîchit pour afficher les titres pertinents pour cette vue.

Si vous avez des structures de titres différentes dans chaque vue, les utilisateurs ne voient que les titres pertinents pour la langue ou le framework qu’ils ont sélectionné.

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

<ResponseField name="title" type="string">
  Le titre qui identifie cette vue. Chaque titre unique de la page devient une option du menu déroulant multi‑vue.
</ResponseField>

<ResponseField name="icon" type="string">
  Une icône [Font Awesome](https://fontawesome.com/icons), [Lucide](https://lucide.dev/icons) ou [Tabler](https://tabler.io/icons), un seul emoji, une URL d’icône ou un chemin relatif vers une icône.
</ResponseField>

<ResponseField name="iconType" type="string">
  Pour les icônes Font Awesome uniquement : l'une de `regular`, `solid`, `light`, `thin`, `sharp-solid`, `duotone`, `brands`.
</ResponseField>

<ResponseField name="className" type="string">
  Classes CSS supplémentaires à appliquer au conteneur de la vue.
</ResponseField>