Ansicht
Erstellen Sie Dokumentation, die sich an das Framework oder die Sprachauswahl der Leser anpasst. Ganze Abschnitte wechseln je nach Benutzerauswahl.
Ansichten wechseln ganze Abschnitte einer Seite passend zum Framework oder zur Sprache des Lesers. Tabs zeigen Optionen nebeneinander. Ansichten blenden nicht ausgewählte Inhalte vollständig aus. Verwenden Sie sie, wenn sich ganze Abschnitte zwischen Frameworks unterscheiden.
Verwenden Sie Ansichten, wenn:
- sich ganze Seitenabschnitte je nach Framework unterscheiden (nicht nur Code-Snippets)
- Tutorials für verschiedene Technologien unterschiedliche Schritte haben
- sich Einstiegsleitfäden je nach Plattform unterscheiden
Grundlegende Verwendung
Erstellen Sie Ansichten für verschiedene Sprachen:
<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>Funktionsweise
Eine Seite mit View-Komponenten funktioniert so:
- Oben im Inhalt erscheint ein Dropdown-Auswahlfeld
- Leser wechseln mit dem Dropdown zwischen den Ansichten
- Nur der Inhalt der ausgewählten Ansicht ist sichtbar
Ansicht vs. Tabs vs. CodeGroup
| Komponente | Ideal für | Geltungsbereich |
|---|---|---|
| View | Ganze Abschnitte, die sich nach Framework unterscheiden | Seitenweiter Inhaltswechsel |
| Tabs | Schnelle Vergleiche, Paketmanager | Inline-Inhaltswechsel |
| CodeGroup | Dieselbe Operation in mehreren Sprachen | Nur Codeblöcke |
Beispielszenarien:
- „Installation mit npm vs. yarn" → Tabs (kleiner Unterschied)
- „JavaScript fetch vs. Python requests" → CodeGroup (Codevergleich)
- „React-Tutorial vs. Vue-Tutorial" → View (ganzer Abschnitt unterscheidet sich)
Props
Der im Dropdown-Auswahlfeld angezeigte Titel. Muss auf der Seite eindeutig sein.
Ein Font-Awesome-Icon, eine URL zu einem Icon oder ein relativer Pfad zu einem Icon.
Nur für Font-Awesome-Icons. Optionen: regular, solid, light, thin, sharp-solid, duotone, brands.