Pestañas

Para crear una interfaz con pestañas usa los componentes <Tabs> y <TabItem>. Las pestañas son útiles para agrupar información equivalente donde un usuario solo necesita ver una de varias opciones.

Preview

Estrellas

Sirius, Vega, Betelgeuse

Lunas

Io, Europa, Ganymede

Importación

import { Tabs, TabItem } from '@astrojs/starlight/components';

Uso

Muestra una interfaz con pestañas usando los componentes <Tabs> y <TabItem>. Cada <TabItem> debe tener una label para mostrar a los usuarios.

MDX

import { Tabs, TabItem } from '@astrojs/starlight/components';

<Tabs>
  <TabItem label="Estrellas">Sirius, Vega, Betelgeuse</TabItem>
  <TabItem label="Lunas">Io, Europa, Ganymede</TabItem>
</Tabs>

Markdoc

{% tabs %}
{% tabitem label="Estrellas" %}
Sirius, Vega, Betelgeuse
{% /tabitem %}

{% tabitem label="Lunas" %}
Io, Europa, Ganymede
{% /tabitem %}
{% /tabs %}

Preview

Estrellas

Sirius, Vega, Betelgeuse

Lunas

Io, Europa, Ganymede

Sincronizar pestañas

Mantén sincronizados varios grupos de pestañas agregando el atributo syncKey.

Todos las <Tabs> en una página con el mismo valor de syncKey mostrarán la misma etiqueta activa. Esto permite que el lector elija una vez (por ejemplo, su sistema operativo o administrador de paquetes) y vea su elección persistida a través de las navegaciones de página.

Para sincronizar pestañas relacionadas, agrega una propiedad syncKey idéntica a cada componente <Tabs> y asegúrate de que todos usen las mismas etiquetas <TabItem>:

MDX

import { Tabs, TabItem } from '@astrojs/starlight/components';

_Algunas estrellas:_

<Tabs syncKey="constelaciones">
  <TabItem label="Orion">Bellatrix, Rigel, Betelgeuse</TabItem>
  <TabItem label="Gemini">Pollux, Castor A, Castor B</TabItem>
</Tabs>

_Algunos exoplanetas:_

<Tabs syncKey="constelaciones">
  <TabItem label="Orion">HD 34445 b, Gliese 179 b, Wasp-82 b</TabItem>
  <TabItem label="Gemini">Pollux b, HAT-P-24b, HD 50554 b</TabItem>
</Tabs>

Markdoc

_Algunas estrellas:_

{% tabs syncKey="constelaciones" %}
{% tabitem label="Orion" %}
Bellatrix, Rigel, Betelgeuse
{% /tabitem %}

{% tabitem label="Gemini" %}
Pollux, Castor A, Castor B
{% /tabitem %}
{% /tabs %}

_Algunos exoplanetas:_

{% tabs syncKey="constelaciones" %}
{% tabitem label="Orion" %}
HD 34445 b, Gliese 179 b, Wasp-82 b
{% /tabitem %}

{% tabitem label="Gemini" %}
Pollux b, HAT-P-24b, HD 50554 b
{% /tabitem %}
{% /tabs %}

Preview

Algunas estrellas:

Orion

Bellatrix, Rigel, Betelgeuse

Gemini

Pollux, Castor A, Castor B

Algunos exoplanetas:

Orion

HD 34445 b, Gliese 179 b, Wasp-82 b

Gemini

Pollux b, HAT-P-24b, HD 50554 b

Agregar iconos a las pestañas

Incluye un icono en un elemento de pestaña usando el atributo icon establecido en el nombre de uno de los iconos integrados de Starlight para mostrar un icono junto a la etiqueta.

MDX

import { Tabs, TabItem } from '@astrojs/starlight/components';

<Tabs>
  <TabItem label="Estrellas" icon="star">
    Sirius, Vega, Betelgeuse
  </TabItem>
  <TabItem label="Lunas" icon="moon">
    Io, Europa, Ganymede
  </TabItem>
</Tabs>

Markdoc

{% tabs %}
{% tabitem label="Estrellas" icon="star" %}
Sirius, Vega, Betelgeuse
{% /tabitem %}

{% tabitem label="Lunas" icon="moon" %}
Io, Europa, Ganymede
{% /tabitem %}
{% /tabs %}

Preview

Estrellas

Sirius, Vega, Betelgeuse

Lunas

Io, Europa, Ganymede

Props de <Tabs>

Implementación: Tabs.astro

El componente <Tabs> agrupa varios componentes <TabItem> y acepta las siguientes propiedades:

syncKey

tipo: string

Una clave utilizada para mantener sincronizados varios grupos de pestañas en varias páginas.

Props de <TabItem>

Implementación: TabItem.astro

Un conjunto de pestañas está compuesto por elementos de pestaña, cada uno con las siguientes propiedades:

label

requerido
tipo: string

Un elemento de pestaña debe incluir un atributo label establecido en el texto que se mostrará en la pestaña.

icon

tipo: string

Cada elemento de pestaña puede incluir un atributo icon establecido en el nombre de uno de los iconos integrados de Starlight para mostrar un icono junto a la etiqueta.