Lista de Grade

As listas de grade exibem uma coleção de imagens em uma grade de forma organizada.

Listas de Grade representam uma coleção de itens em um padrão repetido. Elas ajudam a melhorar a compreensão visual do conteúdo que elas contêm.

Lista de grade com imagens

Standard image lists are best for items of equal importance. They have a uniform container size, ratio, and spacing.

<ImageList cols={3} rowHeight={164} className={classes.root}>
  {itemData.map((item) => (
    <ImageListItem key={item.img}>
      <img
        srcSet={`${item.img}?w=164&h=164&fit=crop&auto=format 1x,
            ${item.img}?w=164&h=164&fit=crop&auto=format&dpr=2 2x`}
        alt={item.title}
      />
    </ImageListItem>
  ))}
</ImageList>

Lista de grade com barras de título

Quilted image lists emphasize certain items over others in a collection. They create hierarchy using varied container sizes and ratios.

<ImageList variant="quilted" cols={4} rowHeight={121} className={classes.root}>
  {itemData.map((item) => (
    <ImageListItem key={item.img} cols={item.cols || 1} rows={item.rows || 1}>
      <img
        srcSet={srcset(item.img, 121, item.rows, item.cols)}
        alt={item.title}
      />
    </ImageListItem>
  ))}
</ImageList>

Lista de grade em linha única

Woven image lists use alternating container ratios to create a rhythmic layout. A woven image list is best for browsing peer content.

<ImageList variant="woven" cols={3} gap={8} className={classes.root}>
  {itemData.map((item) => (
    <ImageListItem key={item.img}>
      <img
        srcSet={`${item.img}?w=161&fit=crop&auto=format 1x,
            ${item.img}?w=161&fit=crop&auto=format&dpr=2 2x`}
        alt={item.title}
      />
    </ImageListItem>
  ))}
</ImageList>

Lista de grade avançada

Masonry image lists use dynamically sized container heights that reflect the aspect ratio of each image. This image list is best used for browsing uncropped peer content.

<ImageList variant="masonry" cols={3} gap={8}>
  {itemData.map((item) => (
    <ImageListItem key={item.img}>
      <img
        srcSet={`${item.img}?w=161&fit=crop&auto=format 1x,
          ${item.img}?w=161&fit=crop&auto=format&dpr=2 2x`}
        alt={item.title}
      />
    </ImageListItem>
  ))}
</ImageList>

Image list with title bars

Este exemplo demonstra o uso do ImageListItemBar para adicionar uma sobreposição a cada ImageListItem. A sobreposição pode acomodar um title, subtitle e ação secundária - neste exemplo utilizamos um IconButton.

December
Breakfast
@bkristastucchio
Burger
@rollelflex_graphy726
Camera
@helloimnik
Coffee
@nolanissac
Hats
@hjrc33
Honey
@arwinneil
Basketball
@tjdragotta
Fern
@katie_wasserman
Mushrooms
@silverdalex
Tomato basil
@shelleypauls
Sea star
@peterlaster
Bike
@southside_customs

Title bar below image (standard)

The title bar can be placed below the image.

Breakfast
by: @bkristastucchio
Burger
by: @rollelflex_graphy726
Camera
by: @helloimnik
Coffee
by: @nolanissac
Hats
by: @hjrc33
Honey
by: @arwinneil
Basketball
by: @tjdragotta
Fern
by: @katie_wasserman
Mushrooms
by: @silverdalex
Tomato basil
by: @shelleypauls
Sea star
by: @peterlaster
Bike
by: @southside_customs

<ImageList className={classes.root}>
  {itemData.map((item) => (
    <ImageListItem key={item.img}>
      <img
        srcSet={`${item.img}?w=248&fit=crop&auto=format 1x,
            ${item.img}?w=248&fit=crop&auto=format&dpr=2 2x`}
        alt={item.title}
      />
      <ImageListItemBar
        title={item.title}
        subtitle={<span>by: {item.author}</span>}
        position="below"
      />
    </ImageListItem>
  ))}
</ImageList>

Title bar below image (masonry)

swabdesign
Pavel Nekoranec
Charles Deluvio
Christian Mackie
Darren Richardson
Taylor Simpson
Ben Kolde
Philipp Berndt
Jen P.
Douglas Sheppard
Fi Bell
Hutomo Abrianto

<ImageList variant="masonry" cols={3} gap={8}>
  {itemData.map((item) => (
    <ImageListItem key={item.img}>
      <img src={item.img} alt={item.title} />
      <ImageListItemBar position="below" title={item.author} />
    </ImageListItem>
  ))}
</ImageList>

Custom image list

Os blocos tem uma barra de título customizada, posicionada no topo e com um gradiente personalizado titleBackground. A ação secundária IconButton está posicionada à esquerda. Os blocos tem uma barra de título customizada, posicionada no topo e com um gradiente personalizado titleBackground.