Aller au contenu
Starlight

Onglets

Pour créer une interface à onglets, utilisez les composants <Tabs> et <TabItem>. Des onglets sont utiles pour regrouper des informations équivalentes où un utilisateur n’a besoin de voir qu’une des options.

Aperçu
Sirius, Véga, Bételgeuse

Import

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

Utilisation

Affichez une interface à onglets en utilisant les composants <Tabs> et <TabItem>. Chaque composant <TabItem> doit avoir un label à afficher aux utilisateurs.

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


<Tabs>
  <TabItem label="Étoiles">Sirius, Véga, Bételgeuse</TabItem>
  <TabItem label="Lunes">Io, Europe, Ganymède</TabItem>
</Tabs>
Aperçu
Sirius, Véga, Bételgeuse

Synchroniser des onglets

Conservez plusieurs groupes d’onglets synchronisés en ajoutant l’attribut syncKey.

Tous les composants <Tabs> avec la même valeur syncKey afficheront le même label actif. Cela permet à votre lecteur de choisir une fois (par exemple, leur système d’exploitation ou leur gestionnaire de paquets) et de voir leur choix persisté au travers de navigations entre différentes pages.

Pour synchroniser des onglets liés, ajoutez une propriété syncKey identique à chaque composant <Tabs> et assurez-vous qu’ils utilisent tous les mêmes libellés avec le composant <TabItem> :

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


_Quelques étoiles :_


<Tabs syncKey="constellations">
  <TabItem label="Orion">Bellatrix, Rigel, Bételgeuse</TabItem>
  <TabItem label="Gémeaux">Pollux, Castor A, Castor B</TabItem>
</Tabs>


_Quelques exoplanètes :_


<Tabs syncKey="constellations">
  <TabItem label="Orion">HD 34445 b, Gliese 179 b, Wasp-82 b</TabItem>
  <TabItem label="Gémeaux">Pollux b, HAT-P-24b, HD 50554 b</TabItem>
</Tabs>
Aperçu

Quelques étoiles :

Bellatrix, Rigel, Bételgeuse

Quelques exoplanètes :

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

Ajouter des icônes aux onglets

Incluez une icône dans un onglet en utilisant l’attribut icon défini avec une des icônes disponibles avec Starlight pour afficher une icône à côté du libellé.

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


<Tabs>
  <TabItem label="Étoiles" icon="star">
    Sirius, Véga, Bételgeuse
  </TabItem>
  <TabItem label="Lunes" icon="moon">
    Io, Europe, Ganymède
  </TabItem>
</Tabs>
Aperçu

Sirius, Véga, Bételgeuse

Props de <Tabs>

Implémentation : Tabs.astro

Le composant <Tabs> regroupe plusieurs composants <TabItem> et accepte les props suivantes :

syncKey

Type : string

Une clé utilisée pour conserver plusieurs groupes d’onglets synchronisés sur plusieurs pages.

Props de <TabItem>

Implémentation : TabItem.astro

Un ensemble d’onglets est composé d’onglets, chacun avec les props suivantes :

label

Obligatoire
Type : string

Un onglet doit inclure un attribut label défini avec le texte qui sera affiché dans l’onglet.

icon

Type : string

Chaque onglet peut inclure un attribut icon défini avec une des icônes disponibles avec Starlight pour afficher une icône à côté du libellé.