Tabs
2 min
Pestañas organizan contenido relacionado en paneles intercambiables. Son útiles para presentar ejemplos en varios lenguajes de programación, frameworks, sistemas operativos o flujos de trabajo alternativos sin aumentar la longitud de la página.
Sintaxis
Puede agregar este componente usando Markdown o MDX.
<Tabs>
<Tab title="Tab Name">
Content here.
</Tab>
</Tabs>Cada elemento Pestaña requiere una propiedad título, que se muestra como la etiqueta de la pestaña. Puede colocar cualquier contenido compatible con Markdown o MDX dentro de una pestaña, incluidos texto, imágenes, tablas, bloques de código y otros componentes.
Ejemplo en MDX
El siguiente ejemplo crea tres pestañas que contienen muestras de código equivalentes en diferentes lenguajes de programación.
<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.