圖片列表

圖片列表以有組織的網格顯示圖片集合。

圖片列表代表重複模式中的項目集合。它們有助於提高對其所包含內容的視覺理解。

標準圖片列表

標準圖片列表最適合用於同等重要的項目。它們具有統一的容器大小、比例和間距。

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

按下 Enter 鍵開始編輯

拼布圖片列表

拼布圖片列表強調集合中某些項目，使其比其他項目更重要。它們使用不同的容器大小和比例來建立層次結構。

<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>

按下 Enter 鍵開始編輯

編織圖片列表

編織圖片列表使用交替的容器比例來建立有節奏的版面配置。編織圖片列表最適合瀏覽同儕內容。

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

按下 Enter 鍵開始編輯

Masonry 圖片列表

Masonry 圖片列表使用動態調整大小的容器高度，以反映每張圖片的長寬比。此圖片列表最適合用於瀏覽未裁切的同儕內容。

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

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

按下 Enter 鍵開始編輯

帶標題列的圖片列表

此範例示範如何使用 ImageListItemBar 為每個項目新增覆蓋層。覆蓋層可以容納 title、subtitle 和次要操作 - 在此範例中為 IconButton。

十二月
早餐
@bkristastucchio
漢堡
@rollelflex_graphy726
相機
@helloimnik
咖啡
@nolanissac
帽子
@hjrc33
蜂蜜
@arwinneil
籃球
@tjdragotta
蕨類
@katie_wasserman
蘑菇
@silverdalex
番茄羅勒
@shelleypauls
海星
@peterlaster
自行車
@southside_customs

圖片下方的標題列 (標準)

標題列可以放在圖片下方。

早餐
作者：@bkristastucchio
漢堡
作者：@rollelflex_graphy726
相機
作者：@helloimnik
咖啡
作者：@nolanissac
帽子
作者：@hjrc33
蜂蜜
作者：@arwinneil
籃球
作者：@tjdragotta
蕨類
作者：@katie_wasserman
蘑菇
作者：@silverdalex
番茄羅勒
作者：@shelleypauls
海星
作者：@peterlaster
自行車
作者：@southside_customs

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

按下 Enter 鍵開始編輯

自訂圖片列表

在此範例中，項目具有自訂的標題列，位於頂部並具有自訂漸層 titleBackground。次要操作 IconButton 位於左側。gap 屬性用於調整項目之間的間距。

早餐
漢堡
相機
咖啡
帽子
蜂蜜
籃球
蕨類
蘑菇
番茄羅勒
海星
自行車

API

請參閱以下文件，以取得此處提及組件的所有屬性和類別的完整參考。