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
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}
loading="lazy"
/>
</ImageListItem>
))}
</ImageList>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={srcset(item.img, 121, item.rows, item.cols)}
alt={item.title}
loading="lazy"
/>
</ImageListItem>
))}
</ImageList>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
srcSet={`${item.img}?w=161&fit=crop&auto=format 1x,
${item.img}?w=161&fit=crop&auto=format&dpr=2 2x`}
alt={item.title}
loading="lazy"
/>
</ImageListItem>
))}
</ImageList>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
srcSet={`${item.img}?w=161&fit=crop&auto=format 1x,
${item.img}?w=161&fit=crop&auto=format&dpr=2 2x`}
alt={item.title}
loading="lazy"
/>
</ImageListItem>
))}
</ImageList>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
- Breakfastby: @bkristastucchio
- Burgerby: @rollelflex_graphy726
- Cameraby: @helloimnik
- Coffeeby: @nolanissac
- Hatsby: @hjrc33
- Honeyby: @arwinneil
- Basketballby: @tjdragotta
- Fernby: @katie_wasserman
- Mushroomsby: @silverdalex
- Tomato basilby: @shelleypauls
- Sea starby: @peterlaster
- Bikeby: @southside_customs
- 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
srcSet={`${item.img}?w=161&fit=crop&auto=format 1x,
${item.img}?w=161&fit=crop&auto=format&dpr=2 2x`}
alt={item.title}
loading="lazy"
/>
<ImageListItemBar position="below" title={item.author} />
</ImageListItem>
))}
</ImageList>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. A ação secundária IconButton está posicionada à esquerda. A ação secundária IconButton está posicionada à esquerda.
- Breakfast
- Burger
- Camera
- Coffee
- Hats
- Honey
- Basketball
- Fern
- Mushrooms
- Tomato basil
- Sea star
- Bike
