Tabs
2 min
Tabs 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="Tab Name"}
Content here.
::::
:::::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.
<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>Have a question?
Our super-smart AI, knowledgeable support team and an awesome community will get you an answer in a flash.
To ask a question or participate in discussions, you'll need to authenticate first.