Brickslab.

@brickslab/ui-web

Galerie en grille pour afficher une collection d'éléments React. Supporte 1 à 4 colonnes et un espacement configurable. Utilisé pour les galeries de composants, portfolios ou catalogues.

Aperçu

columns=3 (défaut) — 6 éléments

Galerie de composants
Carte 1
Carte 2
Carte 3
Carte 4
Carte 5
Carte 6

columns=2

Élément 1
Élément 2
Élément 3
Élément 4

columns=4

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8

Props

PropTypeDéfautRequisDescription
itemsReactNode[]—✓Tableau d'éléments React à afficher dans la galerie.
titlestring——Titre optionnel affiché au-dessus de la galerie.
columns1 | 2 | 3 | 43—Nombre de colonnes de la grille.
gapnumber——Espacement en pixels entre les éléments de la galerie.

Utilisation

tsx
import { SectionGallery } from "@brickslab/ui-web";

const cards = Array.from({ length: 6 }, (_, i) => (
  <div key={i} style={{ padding: 16, border: "1px solid var(--color-muted)", borderRadius: "var(--radius-md)" }}>
    Carte {i + 1}
  </div>
));

// 3 colonnes (défaut)
<SectionGallery title="Exemples" items={cards} columns={3} />

// 2 colonnes
<SectionGallery items={cards} columns={2} gap={24} />

// 4 colonnes
<SectionGallery items={cards} columns={4} />