Сеть изображений

Сеть изображений суть коллекция изображений на упорядоченной сетке.

Сеть изображений являются коллекцией элементов в повторяющемся шаблоне. Они помогают улучшить визуальное восприятие своего содержания.

Простая сеть изображений

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>

Сеть изображений с заголовками

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>

Сеть изображений в одну строку

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>

Более сложный пример

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

Этот пример демонстрирует использование Полосы заголовка сети изображений, которую следует добавить в каждый Заголовок сети изображений. Мы можем указать заголовок, подзаголовок и дополнительное действие - в этом примере кнопка-иконка.

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

На плитках можно видеть пользовательскую полосу расположенную вверху с даным значением градиента в свойстве titleBackground. Дополнительное действие в Кнопке-иконке распложенно по левую сторону. На плитках можно видеть пользовательскую полосу расположенную вверху с даным значением градиента в свойстве titleBackground.