---
title: Tabs
slug: docs/de/tabs
createdAt: 2026-06-05T14:35:37.593Z
---

[Tabs](docId:4lK3iqUD5wfhH7fLtKXOf) organisieren verwandte Inhalte in umschaltbare Bereiche. Sie sind nützlich, um Beispiele in mehreren Programmiersprachen, Frameworks, Betriebssystemen oder alternativen Workflows zu präsentieren, ohne die Seitenlänge zu erhöhen.

## Syntax

Sie können diese Komponente entweder mit Markdown oder MDX hinzufügen.

::::Tabs
:::Tab{title="Markdown"}
```markdown
:::::Tabs
::::Tab{title="Tab Name"}
Content here.
::::
:::::
```
:::

:::Tab{title="MDX"}
```javascript
<Tabs>
  <Tab title="Tab Name">
    Content here.
  </Tab>
</Tabs>
```
:::
::::

Jedes `Tab`-Element benötigt eine `Titel`-Eigenschaft, die als Tab-Beschriftung angezeigt wird. Sie können beliebige unterstützte Markdown- oder MDX-Inhalte innerhalb eines Tabs platzieren, einschließlich Text, Bilder, Tabellen, Codeblöcke und andere Komponenten.

## MDX-Beispiel

Das folgende Beispiel erstellt drei Tabs mit gleichwertigen Codebeispielen in verschiedenen Programmiersprachen.

````javascript
<Tabs>
  <Tab title="JavaScript">

  ```javascript
  const greeting = 'Hello, world!'
  console.log(greeting)
  ```

  </Tab>
  <Tab title="Python">

  ```python
  greeting = "Hello, world!"
  print(greeting)
  ```

  </Tab>
  <Tab title="Go">

  ```go
  package main

  import "fmt"

  func main() {
      fmt.Println("Hello, world!")
  }
  ```

  </Tab>
</Tabs>
````