CodeGroup

CodeGroup zeigt Codeblöcke in einer Oberfläche mit Registerkarten an und stellt dieselbe Operation in mehreren Sprachen dar. Die Komponente ist speziell für Code konzipiert. Anders als Tabs, die mit beliebigen Inhalten funktionieren, extrahiert CodeGroup automatisch die Sprachbezeichnungen und bewahrt die Syntaxhervorhebung in allen Registerkarten.

Verwende CodeGroup für:

• API-Aufrufe in mehreren Sprachen anzeigen (cURL, Python, JavaScript)
• Implementierungen über verschiedene Frameworks hinweg vergleichen
• Mehrere Dateien in einer Code-Walkthrough anzeigen

Grundlegende Verwendung

const data = await fetch('/api/data').then(r => r.json());

<CodeGroup>
```javascript JavaScript
const data = await fetch('/api/data').then(r => r.json());
```

```python Python
import requests
data = requests.get('/api/data').json()
```

```ruby Ruby
data = HTTParty.get('/api/data').parsed_response
```
</CodeGroup>

API-Beispiele

Zeige API-Aufrufe in verschiedenen Formaten:

curl -X POST https://api.example.com/users \
  -H "Authorization: Bearer $TOKEN" \
  -H "Content-Type: application/json" \
  -d '{"name": "John"}'

Mit Dateinamen

Füge Codeblöcken Dateinamen hinzu:

export const client = axios.create({
  baseURL: process.env.API_URL
});

import httpx

client = httpx.Client(base_url=os.environ['API_URL'])

CodeGroup im Vergleich zu Tabs

Faustregel: Verwende CodeGroup für mehrsprachige Codebeispiele. Verwende Tabs, wenn du eine Synchronisierung über die Seite hinweg oder Inhalte ohne Code benötigst.

Tipps

• Platziere die am häufigsten verwendete Sprache an erster Stelle (standardmäßig ausgewählt).
• Die Bezeichnungen der Registerkarten stammen aus dem Text nach dem Sprachbezeichner (z. B. javascript Node.js).
• Die ausgewählte Registerkarte bleibt beim Navigieren zwischen Seiten erhalten.

Wie geht es weiter?