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
Um exemplo simples de uma GridList com imagens.
<GridList cellHeight={160} className={classes.gridList} cols={3}>
{tileData.map((tile) => (
<GridListTile key={tile.img} cols={tile.cols || 1}>
<img src={tile.img} alt={tile.title} />
</GridListTile>
))}
</GridList>
Lista de grade com barras de título
Este exemplo demonstra o uso do GridListTileBar para adicionar uma sobreposição a cada GridListTile. A sobreposição pode acomodar um title, subtitle e ação secundária - neste exemplo utilizamos um IconButton.
- December
Breakfastby: jill111
Tasty burgerby: director90
Cameraby: Danson67
Morningby: fancycrave1
Hatsby: Hans
Honeyby: fancycravel
Vegetablesby: jill111
Water plantby: BkrmadtyaKarki
Mushroomsby: PublicDomainPictures
Olive oilby: congerdesign
Sea starby: 821292
Bikeby: danfador
Lista de grade de linha única
Este exemplo demonstra uma lista de grade com imagens, em linha unica e rolável horizontalmente. As listas de grade de rolagem horizontal não são recomendadas porque a rolagem interfere nos padrões de leitura típicos, afetando a compreensão. Uma exceção notável para rolagem horizontal, seria uma lista de grade com imagens em linha única, como uma galeria.
- Breakfast
- Tasty burger
- Camera
- Morning
- Hats
- Honey
- Vegetables
- Water plant
- Mushrooms
- Olive oil
- Sea star
- Bike
Lista de grade avançada
Este exemplo demonstra blocos "em destaque", usando as propriedades rows e cols para ajustar o tamanho do bloco, e a propriedade padding para ajustar o espaçamento. 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.
- Breakfast
- Tasty burger
- Camera
- Morning
- Hats
- Honey
- Vegetables
- Water plant
- Mushrooms
- Olive oil
- Sea star
- Bike