---
title: Ansichten
description: Erstellen Sie Dokumentation, die sich an das Framework oder die Sprachauswahl der Lesenden anpasst. Ganze Abschnitte wechseln je nach Auswahl.
---
> **For AI agents:** the complete documentation index is at [llms.txt](/docs/llms.txt). Append `.md` to any page URL for its markdown version.
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
Für Codebeispiele, die sich je nach Sprache unterscheiden, verwenden Sie [CodeGroup](/de/components/code-group). Für Verfahren mit geringfügigen Unterschieden verwenden Sie [Tabs](/de/components/tabs). Verwenden Sie Ansichten, wenn **ganze Abschnitte** inhaltsabhängig vom Framework sind.
## Grundlegende Verwendung
Erstellen Sie Ansichten für verschiedene Sprachen:
This content is only visible when JavaScript is selected.
```javascript
console.log("Hello from JavaScript!");
```
This content is only visible when Python is selected.
```python
print("Hello from Python!")
```
````mdx
This content is only visible when JavaScript is selected.
```javascript
console.log("Hello from JavaScript!");
```
This content is only visible when Python is selected.
```python
print("Hello from Python!")
```
````
## Funktionsweise
Wenn Sie einer Seite View-Komponenten hinzufügen:
1. Oben im Inhalt wird eine Auswahl geöffnet
2. Benutzer können über die Auswahl zwischen Ansichten wechseln
3. 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`.
## Wie geht es weiter?
Alle verfügbaren Komponenten durchsuchen
Erfahren Sie, wie Sie Komponenten in MDX verwenden