图片列表

图片列表以有组织的网格显示图像集合。

图片列表以重复的模式表示项目集合。它们有助于提高对其所包含内容的视觉理解。

标准图片列表

标准图片列表最适合同等重要的项目。它们具有统一的容器大小、比例和间距。

<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 开始编辑

瀑布流图片列表

瀑布流图片列表使用动态调整大小的容器高度，以反映每个图像的纵横比。此图片列表最适合浏览未裁剪的同类内容。

<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

图片下方的标题栏（瀑布流）

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

请参阅下面的文档，以获取此处提及的组件的所有可用 props 和类的完整参考。