Tabs

Les Tabs vous permettent d’organiser du contenu associé en panneaux interchangeables. Ils sont couramment utilisés pour afficher des commandes selon différents gestionnaires de paquets ou du code dans différents langages.

Utilisation basique

pnpm install

npm install

yarn install

Syntaxe

Les Tabs utilisent la syntaxe JSX car ce sont des composants React interactifs. Voici le schéma général :

<Tabs items={["Onglet 1", "Onglet 2"]} client:load>
  <Tab label="Onglet 1">
    Contenu du premier onglet.
  </Tab>
  <Tab label="Onglet 2">
    Contenu du deuxième onglet.
  </Tab>
</Tabs>

La directive client:load est requise pour l’interactivité. Sans elle, les onglets ne changeront pas au clic.

Exemple avec gestionnaire de paquets

<Tabs items={["pnpm", "npm", "yarn"]} client:load>
  <Tab label="pnpm">
    ```bash
    pnpm install @explainer/ui
    ```
  </Tab>
  <Tab label="npm">
    ```bash
    npm install @explainer/ui
    ```
  </Tab>
  <Tab label="yarn">
    ```bash
    yarn add @explainer/ui
    ```
  </Tab>
</Tabs>

Props

Tabs

Prop	Type	Description
`items`	`string[]`	Tableau de libellés d’onglets affichés comme en-têtes
`client:load`	—	Directive Astro pour hydrater le composant côté client

Tab

Prop	Type	Description
`label`	`string`	Doit correspondre exactement à l’une des valeurs de `items`