mirror of
https://github.com/mintlify/docs.git
synced 2026-09-14 13:35:46 +08:00
mintlify[bot]
2ccd573b95
Co-authored-by: mintlify[bot] <109931778+mintlify[bot]@users.noreply.github.com>
75 lines
2.8 KiB
Plaintext
75 lines
2.8 KiB
Plaintext
---
|
||
title: "Vue"
|
||
description: "Utilisez le composant view pour créer des panneaux de contenu commutables pour différents langages de programmation, frameworks ou variantes de configuration."
|
||
keywords: ["sélecteur", "contenu spécifique à un langage", "changement de contenu"]
|
||
boost: 3
|
||
---
|
||
|
||
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.
|
||
|
||
<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>
|
||
|
||
<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="example">
|
||
## Exemple
|
||
</div>
|
||
|
||
````mdx 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
|
||
</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
|
||
</div>
|
||
|
||
<ResponseField name="title" type="string" required>
|
||
Le titre qui identifie cette vue. Doit correspondre à l’une des options du menu déroulant multi‑vue.
|
||
</ResponseField>
|
||
|
||
<ResponseField name="icon" type="string">
|
||
Une icône [Font Awesome](https://fontawesome.com/icons), une icône [Lucide](https://lucide.dev/icons), 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>
|