Сеть изображений
Сеть изображений суть коллекция изображений на упорядоченной сетке.
Сеть изображений являются коллекцией элементов в повторяющемся шаблоне. Они помогают улучшить визуальное восприятие своего содержания.
Простая сеть изображений
Простой пример прокручиваемой Сети изображений.
<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>
Сеть изображений с заголовками
Этот пример демонстрирует использование Полосы заголовка сети изображений, которую следует добавить в каждый Заголовок сети изображений. Мы можем указать заголовок, подзаголовок и дополнительное действие - в этом примере кнопка-иконка.
- 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
Сеть изображений в одну строку
Данный пример показывает сеть изображений в одну строку с горизонтальной прокруткой. Сети изображений с горизонтальнйо прокруткой не рекомендуется применять, так как это может вызвать дискомфорт у пользователей, ведь обычно при чтении используется вертикальная прокрутка. Исключением из этого правила являются сети с горизонтальной прокруткой в одну строку, например галерея.
- Breakfast
- Tasty burger
- Camera
- Morning
- Hats
- Honey
- Vegetables
- Water plant
- Mushrooms
- Olive oil
- Sea star
- Bike
Более сложный пример
В этом примере демонстрирует «рекомендуемые» листы, в которых используются свойства rows и cols чтобы отрегулировать размер плитки, и свойство padding чтобы отрегулировать поля между плитками. На плитках можно видеть пользовательскую полосу расположенную вверху с даным значением градиента в свойстве titleBackground. Дополнительное действие в Кнопке-иконке распложенно по левую сторону.
- Breakfast
- Tasty burger
- Camera
- Morning
- Hats
- Honey
- Vegetables
- Water plant
- Mushrooms
- Olive oil
- Sea star
- Bike