---
title: Tabs
description: Umschaltbare Panels für sich gegenseitig ausschließende Inhalte wie Paketmanager oder Programmiersprachen. Gleiche Tab-Titel werden seitenweit synchronisiert.
---

> **For AI agents:** the complete documentation index is at [llms.txt](/docs/llms.txt). Append `.md` to any page URL for its markdown version.

Wenn Ihre Seite parallele Alternativen bietet (Paketmanager, Programmiersprachen oder betriebssystemspezifische Anweisungen), können Leser mit Tabs einmalig auswählen und im Kontext bleiben. Gleiche Tab-Titel werden automatisch auf der gesamten Seite synchronisiert. Wenn Sie in einer Gruppe „yarn“ auswählen, werden alle anderen npm/yarn/pnpm-Gruppen entsprechend angepasst.

Verwenden Sie Tabs, wenn:
- **Mehrere Implementierungen** desselben Konzepts existieren (npm/yarn/pnpm, JavaScript/Python)
- **Parallele Optionen** sich gegenseitig ausschließen (Benutzer wählen eine, nicht beide)
- **Konsistenz wichtig ist** – die Auswahl des Lesers sollte auf der gesamten Seite bestehen bleiben

## Verwendung

```mdx
<Tabs>
  <Tab title="npm">npm install jamdesk</Tab>
  <Tab title="pnpm">pnpm add jamdesk</Tab>
</Tabs>
```

## Grundlegende Tabs

<Tabs>
  <Tab title="First Tab">
    Inhalt des ersten Tabs.
  </Tab>
  <Tab title="Second Tab">
    Inhalt des zweiten Tabs.
  </Tab>
  <Tab title="Third Tab">
    Inhalt des dritten Tabs.
  </Tab>
</Tabs>

```mdx
<Tabs>
  <Tab title="First Tab">
    Content for the first tab.
  </Tab>
  <Tab title="Second Tab">
    Content for the second tab.
  </Tab>
  <Tab title="Third Tab">
    Content for the third tab.
  </Tab>
</Tabs>
```

## Tabs vs. CodeGroup vs. Accordion

| Komponente | Geeignet für | Synchronisierung |
|-----------|--------------|------------------|
| **Tabs** | Sich gegenseitig ausschließende Inhaltsauswahl | Ja (auf der gesamten Seite) |
| **CodeGroup** | Codeblöcke in mehreren Programmiersprachen | Nein |
| **Accordion** | Einklappbare Abschnitte, FAQs | Nein |

**Faustregel:** Verwenden Sie Tabs, wenn die Auswahl des Lesers (z. B. der bevorzugte Paketmanager) auf der gesamten Seite bestehen bleiben soll. Verwenden Sie CodeGroup für Vergleiche, die nur Code enthalten. Verwenden Sie Accordion für Inhalte, die alle relevant sein können.

## Tabs mit Symbolen

Fügen Sie Tab-Titeln mithilfe von Font Awesome-Symbolen Symbole hinzu:

<Tabs>
  <Tab title="React" icon="react" iconType="brands">
    ```jsx
    function App() {
      return <h1>Hello React</h1>;
    }
    ```
  </Tab>
  <Tab title="Vue" icon="vuejs" iconType="brands">
    ```vue
    <template>
      <h1>Hello Vue</h1>
    </template>
    ```
  </Tab>
</Tabs>

````mdx
<Tabs>
  <Tab title="React" icon="react" iconType="brands">
    ```jsx
    function App() {
      return <h1>Hello React</h1>;
    }
    ```
  </Tab>
  <Tab title="Vue" icon="vuejs" iconType="brands">
    ```vue
    <template>
      <h1>Hello Vue</h1>
    </template>
    ```
  </Tab>
</Tabs>
````

## Unterer Rand

Verwenden Sie die Eigenschaft `borderBottom`, um unter dem Tab-Inhalt eine visuelle Trennlinie hinzuzufügen:

<Tabs borderBottom>
  <Tab title="Overview">
    Diese Tab-Gruppe hat zur visuellen Trennung einen unteren Rand.
  </Tab>
  <Tab title="Details">
    Dies ist nützlich, wenn Tabs Inhalte mit unterschiedlichen Längen enthalten.
  </Tab>
</Tabs>

```mdx
<Tabs borderBottom>
  <Tab title="Overview">
    This tab group has a bottom border for visual separation.
  </Tab>
  <Tab title="Details">
    Useful when tabs contain varying content lengths.
  </Tab>
</Tabs>
```

## Synchronisierte Tabs

Tabs mit übereinstimmenden Titeln werden automatisch auf der gesamten Seite synchronisiert. Klicken Sie in einer Gruppe auf „yarn“, und alle npm/yarn/pnpm-Tabs auf der Seite wechseln gemeinsam:

**Installieren:**

<Tabs>
  <Tab title="npm">
    ```bash
    npm install my-package
    ```
  </Tab>
  <Tab title="yarn">
    ```bash
    yarn add my-package
    ```
  </Tab>
</Tabs>

**Ausführen:**

<Tabs>
  <Tab title="npm">
    ```bash
    npm run dev
    ```
  </Tab>
  <Tab title="yarn">
    ```bash
    yarn dev
    ```
  </Tab>
</Tabs>

Die Synchronisierung erfolgt, wenn Tab-Titel übereinstimmen (ohne Beachtung der Groß- und Kleinschreibung).

## Eigenschaften

### Tabs

<ParamField name="borderBottom" type="boolean" default="false">
  Fügt dem Container des Tab-Inhalts einen unteren Rand und Innenabstände hinzu. Dies ist nützlich, um Tab-Inhalte visuell vom restlichen Seiteninhalt zu trennen.
</ParamField>

### Tab

<ParamField name="title" type="string" required>
  Das in der Tab-Leiste angezeigte Label. Tabs mit übereinstimmenden Titeln synchronisieren ihre Auswahl automatisch auf der gesamten Seite.
</ParamField>

<ParamField name="icon" type="string">
  Der Name des Font Awesome-Symbols, das vor dem Titel angezeigt werden soll (z. B. „react“, „code“, „terminal“).
</ParamField>

<ParamField name="iconType" type="string" default="solid">
  Der Stil des Font Awesome-Symbols. Optionen: `regular`, `solid`, `light`, `thin`, `sharp-solid`, `duotone`, `brands`.
</ParamField>

## Wie geht es weiter?

<Columns cols={2}>
  <Card title="Komponentenübersicht" icon="puzzle-piece" href="/de/components/overview">
    Alle verfügbaren Komponenten durchsuchen
  </Card>
  <Card title="MDX-Grundlagen" icon="file-code" href="/de/content/mdx-basics">
    Erfahren Sie, wie Sie Komponenten in MDX verwenden
  </Card>
</Columns>