Brickslab.Toolsv2.1.1

@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.
Override rapide

Tous les paramètres listés dans cette table sont overrideables via les props. Utilisez ce squelette comme point de départ.

<MyComponent
  items={<span>...</span>}
  title="..."
  columns={3}
  gap={0}
/>
itemstitlecolumnsgap

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} />