Ansichten
Erstellen Sie Dokumentation, die sich an das Framework oder die Sprachauswahl der Lesenden anpasst. Ganze Abschnitte wechseln je nach Auswahl.
Mit Ansichten können Sie Dokumentation erstellen, die sich an das Framework oder die Sprachauswahl der Lesenden anpasst. Anders als Tabs (die mehrere Optionen nebeneinander anzeigen) blenden Ansichten nicht ausgewählte Inhalte vollständig aus. Dadurch bleibt die Seite übersichtlicher, wenn sich ganze Abschnitte zwischen Frameworks unterscheiden.
Verwenden Sie Ansichten, wenn:
- Ganze Seitenabschnitte sich je nach Framework unterscheiden (nicht nur Codeausschnitte)
- Tutorials je nach Technologie unterschiedliche Schritte enthalten
- Anleitungen zum Einstieg je nach Plattform deutlich variieren
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
Wenn Sie einer Seite View-Komponenten hinzufügen:
- Oben im Inhalt wird eine Auswahl geöffnet
- Benutzer können über die Auswahl zwischen Ansichten wechseln
- Nur der Inhalt der ausgewählten Ansicht ist sichtbar
Ansicht vs. Tabs vs. CodeGroup
| Komponente | Am besten geeignet für | Geltungsbereich |
|---|---|---|
| Ansicht | Ganze Abschnitte, die sich je nach Framework unterscheiden | Inhaltswechsel für die gesamte Seite |
| Tabs | Schnelle Vergleiche, Paketmanager | Wechsel von Inline-Inhalten |
| CodeGroup | Dieselbe Operation in mehreren Programmiersprachen | Nur Codeblöcke |
Beispielszenarien:
- „Mit npm vs. yarn installieren“ → Tabs (kleiner Unterschied)
- „JavaScript fetch vs. Python requests“ → CodeGroup (Codevergleich)
- „React-Tutorial vs. Vue-Tutorial“ → Ansicht (gesamter Abschnitt unterscheidet sich)
Props
Der im Auswahlmenü angezeigte Titel. Muss innerhalb der Seite eindeutig sein.
Ein Font Awesome-Symbol, Lucide-Symbol, eine URL zu einem Symbol oder ein relativer Pfad zu einem Symbol.
Nur für Font Awesome-Symbole. Optionen: regular, solid, light, thin, sharp-solid, duotone, brands.