Masonry

Mise en page en maçonnerie de style Pinterest pour afficher des éléments de hauteurs variables dans une grille organisée.

Import

import { Masonry } from 'asterui'

Exemples

Éléments dynamiques

Ajoutez et supprimez des éléments dynamiquement. Les nouveaux éléments sont placés dans la colonne la plus courte.

Item 1

Item 2

Item 3

import { Masonry, Button } from 'asterui'
import { useState } from 'react'

function App() {
  const COLORS = ['#0092ff', '#00d084', '#ff6b6b', '#ffd93d', '#a29bfe', '#fd79a8']
  const HEIGHTS = [100, 120, 140, 160, 180, 200]
  
  interface Item { id: number; color: string; height: number }
  
  const [items, setItems] = useState<Item[]>([
    { id: 1, color: COLORS[0], height: 120 },
    { id: 2, color: COLORS[1], height: 180 },
    { id: 3, color: COLORS[2], height: 140 },
  ])
  const [nextId, setNextId] = useState(4)
  
  const addItem = () => {
    setItems([...items, {
      id: nextId,
      color: COLORS[Math.floor(Math.random() * COLORS.length)],
      height: HEIGHTS[Math.floor(Math.random() * HEIGHTS.length)],
    }])
    setNextId(nextId + 1)
  }
  
  const removeItem = (id: number) => setItems(items.filter(item => item.id !== id))
  
  return (
      <div>
        <div className="mb-4">
          <Button color="primary" onClick={addItem}>Add Item</Button>
        </div>
        <Masonry columns={3} gap={16}>
          {items.map(item => (
            <div
              key={item.id}
              className="relative rounded-lg"
              style={{ background: item.color, padding: '16px', color: 'white', height: item.height }}
            >
              <Button
                variant="ghost"
                size="sm"
                shape="circle"
                className="absolute top-1 right-1 min-h-0 h-6 w-6 text-white hover:bg-black/20"
                onClick={() => removeItem(item.id)}
              >
                ×
              </Button>
              Item {item.id}
            </div>
          ))}
        </Masonry>
      </div>
    )
}

export default App

Maçonnerie basique

Grille de maçonnerie simple avec éléments de hauteur variable.

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

import { Masonry } from 'asterui'

function App() {
  return (
      <Masonry columns={3} gap={16}>
        <div style={{ background: '#0092ff', padding: '16px', color: 'white', height: '120px' }}>
          Item 1
        </div>
        <div style={{ background: '#00d084', padding: '16px', color: 'white', height: '180px' }}>
          Item 2
        </div>
        <div style={{ background: '#ff6b6b', padding: '16px', color: 'white', height: '140px' }}>
          Item 3
        </div>
        <div style={{ background: '#ffd93d', padding: '16px', color: 'white', height: '200px' }}>
          Item 4
        </div>
        <div style={{ background: '#a29bfe', padding: '16px', color: 'white', height: '160px' }}>
          Item 5
        </div>
        <div style={{ background: '#fd79a8', padding: '16px', color: 'white', height: '130px' }}>
          Item 6
        </div>
      </Masonry>
    )
}

export default App

Colonnes réactives

Nombre de colonnes réactif à différents points de rupture.

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

import { Masonry } from 'asterui'

function App() {
  return (
      <Masonry columns={{ xs: 1, sm: 2, md: 3, lg: 4 }} gap={16}>
        <div style={{ background: '#0092ff', padding: '16px', color: 'white', height: '120px' }}>
          Item 1
        </div>
        <div style={{ background: '#00d084', padding: '16px', color: 'white', height: '180px' }}>
          Item 2
        </div>
        <div style={{ background: '#ff6b6b', padding: '16px', color: 'white', height: '140px' }}>
          Item 3
        </div>
        <div style={{ background: '#ffd93d', padding: '16px', color: 'white', height: '200px' }}>
          Item 4
        </div>
        <div style={{ background: '#a29bfe', padding: '16px', color: 'white', height: '160px' }}>
          Item 5
        </div>
        <div style={{ background: '#fd79a8', padding: '16px', color: 'white', height: '130px' }}>
          Item 6
        </div>
        <div style={{ background: '#74b9ff', padding: '16px', color: 'white', height: '150px' }}>
          Item 7
        </div>
        <div style={{ background: '#fab1a0', padding: '16px', color: 'white', height: '170px' }}>
          Item 8
        </div>
      </Masonry>
    )
}

export default App

Espacement personnalisé

Différentes tailles d'espacement entre les éléments.

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

import { Masonry } from 'asterui'

function App() {
  return (
      <Masonry columns={3} gap={32}>
        <div style={{ background: '#0092ff', padding: '16px', color: 'white', height: '120px' }}>
          Item 1
        </div>
        <div style={{ background: '#00d084', padding: '16px', color: 'white', height: '180px' }}>
          Item 2
        </div>
        <div style={{ background: '#ff6b6b', padding: '16px', color: 'white', height: '140px' }}>
          Item 3
        </div>
        <div style={{ background: '#ffd93d', padding: '16px', color: 'white', height: '200px' }}>
          Item 4
        </div>
        <div style={{ background: '#a29bfe', padding: '16px', color: 'white', height: '160px' }}>
          Item 5
        </div>
        <div style={{ background: '#fd79a8', padding: '16px', color: 'white', height: '130px' }}>
          Item 6
        </div>
      </Masonry>
    )
}

export default App

API

`Masonry`

Propriété	Description	Type	Par défaut
`columns`	Nombre de colonnes ou configuration de colonnes réactive	`number \| { xs?: number, sm?: number, md?: number, lg?: number, xl?: number, '2xl'?: number }`	`3`
`gap`	Espacement entre les éléments en pixels	`number`	`16`
`children`	Éléments à afficher dans la mise en page en maçonnerie	`React.ReactNode`	-
`className`	Classes CSS supplémentaires	`string`	-
`data-testid`	ID de test pour les tests	`string`	-

Notes d’utilisation

Le composant Masonry crée une mise en page de style Pinterest où les éléments sont disposés en colonnes
Les éléments s’écoulent dans la colonne la plus courte pour créer une mise en page équilibrée
Utilisez la prop columns pour définir un nombre fixe de colonnes ou le rendre réactif
La prop gap contrôle l’espacement entre les éléments en pixels
Points de rupture réactifs : xs (<640px), sm (≥640px), md (≥768px), lg (≥1024px), xl (≥1280px), 2xl (≥1536px)
Les éléments peuvent avoir des hauteurs variables - la mise en page les distribuera automatiquement de manière efficace
Idéal pour les galeries d’images, les grilles de produits et les cartes de contenu