BricksLab Catalog

@brickslab/ui-web

Barre d'onglets contrôlée — reçoit value et onChange du parent. 3 variantes visuelles (underline, pills, boxed), 3 tailles, support icônes, fullWidth et onglet disabled. TabPanel est un wrapper qui affiche son contenu uniquement quand value === activeValue.

Aperçu

variant underline (défaut) avec TabPanel

Vue d'ensemble du projet — métriques, statut et dernières mises à jour.

Variantes

underline · pills · boxed

underline

pills

boxed

Tailles

sm · md (défaut) · lg

Full Width

fullWidth — onglets répartis sur toute la largeur

Avec icônes

prop icon dans TabItem — accepte React.ReactNode

Tab désactivé

disabled: true sur un TabItem — bloque le clic

Props — Tabs

Prop	Type	Défaut	Requis	Description
`tabs`	`TabItem[]`	—	✓	Liste des onglets — chaque item a value, label, icon? et disabled?.
`value`	`string`	—	✓	Valeur de l'onglet actif — contrôlé par le parent.
`onChange`	`(value: string) => void`	—	✓	Callback appelé avec la valeur de l'onglet cliqué.
`variant`	`"underline" \| "pills" \| "boxed"`	`"underline"`	—	Style visuel de la barre d'onglets.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	—	Taille des onglets (typographie + padding).
`fullWidth`	`boolean`	`false`	—	Les onglets occupent toute la largeur disponible à parts égales.

Props — TabPanel

Prop	Type	Défaut	Requis	Description
`value`	`string`	—	✓	Valeur de ce panneau.
`activeValue`	`string`	—	✓	Valeur de l'onglet actif — panneau rendu seulement si value === activeValue.
`children`	`React.ReactNode`	—	✓	Contenu du panneau.

Utilisation

tsx

import { Tabs, TabPanel } from "@brickslab/ui-web";
import { useState } from "react";

const tabs = [
  { value: "apercu",  label: "Aperçu" },
  { value: "props",   label: "Props" },
  { value: "code",    label: "Code" },
];

const [active, setActive] = useState("apercu");

<Tabs tabs={tabs} value={active} onChange={setActive} />

<TabPanel value="apercu" activeValue={active}>
  <p>Contenu de l'aperçu</p>
</TabPanel>
<TabPanel value="props" activeValue={active}>
  <p>Contenu des props</p>
</TabPanel>
<TabPanel value="code" activeValue={active}>
  <p>Contenu du code</p>
</TabPanel>

// Variantes
<Tabs tabs={tabs} value={active} onChange={setActive} variant="pills" />
<Tabs tabs={tabs} value={active} onChange={setActive} variant="boxed" />

// Tailles
<Tabs tabs={tabs} value={active} onChange={setActive} size="sm" />
<Tabs tabs={tabs} value={active} onChange={setActive} size="lg" />

// Full width
<Tabs tabs={tabs} value={active} onChange={setActive} fullWidth />

// Avec icônes
import { FiEye, FiCode, FiList } from "react-icons/fi";
const tabsWithIcons = [
  { value: "apercu", label: "Aperçu", icon: <FiEye size={14} /> },
  { value: "code",   label: "Code",   icon: <FiCode size={14} /> },
  { value: "liste",  label: "Liste",  icon: <FiList size={14} /> },
];

// Tab désactivé
const tabs = [
  { value: "actif",    label: "Actif" },
  { value: "desactive", label: "Désactivé", disabled: true },
];

Tabs / TabPanel