Lista de imagem

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

As listas de imagens 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 imagem padrão

Listas de imagem padrão são as melhores para itens de igual importância. Elas tem um tamanho uniforme no contêiner, proporção e espaçamento.

<ImageList sx={{ width: 500, height: 450 }} cols={3} rowHeight={164}>
  {itemData.map((item) => (
    <ImageListItem key={item.img}>
      <img
        src={`${item.img}?w=164&h=164&fit=crop&auto=format`}
        srcSet={`${item.img}?w=164&h=164&fit=crop&auto=format&dpr=2 2x`}
        alt={item.title}
        loading="lazy"
      />
    </ImageListItem>
  ))}
</ImageList>

<ImageList sx={{ width: 500, height: 450 }} cols={3} rowHeight={164}>
  {itemData.map((item) => (
    <ImageListItem key={item.img}>
      <img
        src={`${item.img}?w=164&h=164&fit=crop&auto=format`}
        srcSet={`${item.img}?w=164&h=164&fit=crop&auto=format&dpr=2 2x`}
        alt={item.title}
        loading="lazy"
      />
    </ImageListItem>
  ))}
</ImageList>

Press Enter to start editing

Lista de imagem com barras de título

Listas de imagens classificadas enfatizam certos itens sobre outros em uma coleção. Criam uma hierarquia usando tamanhos de contêiner variados e proporção.

<ImageList
  sx={{ width: 500, height: 450 }}
  variant="quilted"
  cols={4}
  rowHeight={121}
>
  {itemData.map((item) => (
    <ImageListItem key={item.img} cols={item.cols || 1} rows={item.rows || 1}>
      <img
        {...srcset(item.img, 121, item.rows, item.cols)}
        alt={item.title}
        loading="lazy"
      />
    </ImageListItem>
  ))}
</ImageList>

<ImageList
  sx={{ width: 500, height: 450 }}
  variant="quilted"
  cols={4}
  rowHeight={121}
>
  {itemData.map((item) => (
    <ImageListItem key={item.img} cols={item.cols || 1} rows={item.rows || 1}>
      <img
        {...srcset(item.img, 121, item.rows, item.cols)}
        alt={item.title}
        loading="lazy"
      />
    </ImageListItem>
  ))}
</ImageList>

Press Enter to start editing

Lista de imagem entrelaçada

Listas de imagens entrelaçadas usam contêiner de proporção alternados para criar um leiaute rítmico. Uma lista de imagens entrelaçadas é melhor para navegar por conteúdo em pares.

<ImageList sx={{ width: 500, height: 450 }} variant="woven" cols={3} gap={8}>
  {itemData.map((item) => (
    <ImageListItem key={item.img}>
      <img
        src={`${item.img}?w=161&fit=crop&auto=format`}
        srcSet={`${item.img}?w=161&fit=crop&auto=format&dpr=2 2x`}
        alt={item.title}
        loading="lazy"
      />
    </ImageListItem>
  ))}
</ImageList>

<ImageList sx={{ width: 500, height: 450 }} variant="woven" cols={3} gap={8}>
  {itemData.map((item) => (
    <ImageListItem key={item.img}>
      <img
        src={`${item.img}?w=161&fit=crop&auto=format`}
        srcSet={`${item.img}?w=161&fit=crop&auto=format&dpr=2 2x`}
        alt={item.title}
        loading="lazy"
      />
    </ImageListItem>
  ))}
</ImageList>

Press Enter to start editing

Lista de imagem alternada

Listas de imagens alternadas usam alturas de tamanho dinamicamente dimensionado do contêiner que reflete a proporção de cada imagem. Esta lista de imagens é a melhor utilizada para navegação de conteúdo de pares não cortados.

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

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

Press Enter to start editing

Lista de imagem com barra de título

Este exemplo demonstra o uso da ImageListItemBar para adicionar uma sobreposição a cada item. 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

Barra de título abaixo da imagem (padrão)

A barra de título pode ser colocada abaixo da imagem.

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

Barra de título abaixo da imagem (alternada)

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}?w=248&fit=crop&auto=format`}
        srcSet={`${item.img}?w=248&fit=crop&auto=format&dpr=2 2x`}
        alt={item.title}
        loading="lazy"
      />
      <ImageListItemBar position="below" title={item.author} />
    </ImageListItem>
  ))}
</ImageList>

<ImageList variant="masonry" cols={3} gap={8}>
  {itemData.map((item) => (
    <ImageListItem key={item.img}>
      <img
        src={`${item.img}?w=248&fit=crop&auto=format`}
        srcSet={`${item.img}?w=248&fit=crop&auto=format&dpr=2 2x`}
        alt={item.title}
        loading="lazy"
      />
      <ImageListItemBar position="below" title={item.author} />
    </ImageListItem>
  ))}
</ImageList>

Press Enter to start editing

Lista de imagem customizada

Neste exemplo, os itens tem uma barra de título customizada, posicionada no topo e com um gradiente customizado com titleBackground. The secondary action IconButton is positioned on the left. The gap prop is used to adjust the gap between items.

Breakfast
Burger
Camera
Coffee
Hats
Honey
Basketball
Fern
Mushrooms
Tomato basil
Sea star
Bike

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.