Saltearse al contenido
Starlight

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
Sirius, Vega, Betelgeuse

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.

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


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

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>:

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>
Preview

Algunas estrellas:

Bellatrix, Rigel, Betelgeuse

Algunos exoplanetas:

HD 34445 b, Gliese 179 b, Wasp-82 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.

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>
Preview

Sirius, Vega, Betelgeuse

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.