View
Créez une documentation qui s'adapte au framework ou à la langue choisis par le lecteur. Des sections entières changent selon la sélection.
Les Views vous permettent de créer une documentation qui s'adapte au framework ou à la langue choisis par le lecteur. Contrairement aux Tabs (qui affichent plusieurs options côte à côte), les Views masquent entièrement le contenu non sélectionné. Cela garde la page plus claire lorsque des sections entières diffèrent selon les frameworks.
Utilisez les Views lorsque :
- Des sections entières de la page diffèrent selon le framework (pas seulement des extraits de code)
- Des tutoriels ont des étapes différentes selon les technologies
- Des guides de démarrage varient considérablement selon la plateforme
Utilisation de base
Créez des views pour différents langages :
<View title="JavaScript" icon="js">
This content is only visible when JavaScript is selected.
```javascript
console.log("Hello from JavaScript!");
```
</View>
<View title="Python" icon="python">
This content is only visible when Python is selected.
```python
print("Hello from Python!")
```
</View>Fonctionnement
Lorsque vous ajoutez des composants View à une page :
- Un sélecteur déroulant apparaît en haut du contenu
- Les utilisateurs peuvent basculer entre les views via le sélecteur déroulant
- Seul le contenu de la view sélectionnée est visible
View vs Tabs vs CodeGroup
| Composant | Idéal pour | Portée |
|---|---|---|
| View | Sections entières qui diffèrent selon le framework | Changement de contenu sur toute la page |
| Tabs | Comparaisons rapides, gestionnaires de paquets | Changement de contenu en ligne |
| CodeGroup | Une même opération dans plusieurs langages | Blocs de code uniquement |
Exemples de scénarios :
- « Installation avec npm vs yarn » → Tabs (différence minime)
- « JavaScript fetch vs Python requests » → CodeGroup (comparaison de code)
- « Tutoriel React vs tutoriel Vue » → View (section entière différente)
Props
Le titre affiché dans le sélecteur déroulant. Doit être unique au sein de la page.
Une icône Font Awesome, une icône Lucide, une URL vers une icône, ou un chemin relatif vers une icône.
Pour les icônes Font Awesome uniquement. Options : regular, solid, light, thin, sharp-solid, duotone, brands.