Skip to content
Alebat

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

Importación

Importar componentes
import { Tabs, TabItem } from "@astrojs/starlight/components";

Uso

Usa el componente <Tabs> para envolver tus pestañas y el componente <TabItem> para cada pestaña individual.

Uso de Tabs
import { Tabs, TabItem } from "@astrojs/starlight/components";


<Tabs>
  <TabItem label="Estrellas">Sirius, Vega, Betelgeuse</TabItem>
  <TabItem label="Lunas">Io, Europa, Ganymede</TabItem>
</Tabs>;
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>:

Sincronizar pestañas
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>

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 una pestaña usando el atributo icon establecido en el nombre de uno de los iconos integrados de Starlight.

Agregar iconos a las pestañas
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>;

Sirius, Vega, Betelgeuse

Props de <Tabs>

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>

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

label

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

icon