跳转到内容

Grid List 网格列表

网格列表在一个系统的网格中展示了一系列的图像。

网格列表展示了一个在重复的模式中的子集。 它们有助于提高对所持内容的视觉理解。

仅有图像的网格列表

这是一个可滚动的图像的网格列表的简单示例。

  • Breakfast
  • Tasty burger
  • Camera
  • Morning
  • Hats
  • Honey
  • Vegetables
  • Water plant
  • Mushrooms
  • Olive oil
  • Sea star
  • Bike
<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>

带有标题栏的网格列表

此示例演示如何使用 GridListTileBar 为每个 GridListTile 添加一个叠加层。 叠加层可以容纳 titlesubtitle 和辅助操作—在本例中为 IconButton

  • December
  • Breakfast
    Breakfast
    by: jill111
  • Tasty burger
    Tasty burger
    by: director90
  • Camera
    Camera
    by: Danson67
  • Morning
    Morning
    by: fancycrave1
  • Hats
    Hats
    by: Hans
  • Honey
    Honey
    by: fancycravel
  • Vegetables
    Vegetables
    by: jill111
  • Water plant
    Water plant
    by: BkrmadtyaKarki
  • Mushrooms
    Mushrooms
    by: PublicDomainPictures
  • Olive oil
    Olive oil
    by: congerdesign
  • Sea star
    Sea star
    by: 821292
  • Bike
    Bike
    by: danfador

单行网格列表

此示例演示了可以在水平方向滚动的单行纯图像网格列表。 我们其实不鼓励水平滚动网格列表,因为滚动会干扰典型的阅读模式,从而影响用户的理解。 一个值得注意的例外是水平滚动的单行网格图像列表,例如图库。

  • Breakfast
    Breakfast
  • Tasty burger
    Tasty burger
  • Camera
    Camera
  • Morning
    Morning
  • Hats
    Hats
  • Honey
    Honey
  • Vegetables
    Vegetables
  • Water plant
    Water plant
  • Mushrooms
    Mushrooms
  • Olive oil
    Olive oil
  • Sea star
    Sea star
  • Bike
    Bike

高级网格列表

此示例演示了“精选的”瓷砖效果 ,使用 rowscols props 来调整磁贴的大小,并使用 padding 属性来调整间距。 瓷砖有一个位于顶部的自定义标题栏,并带有自定义渐变的 titleBackground 。 而辅助操作的 IconButton 则位于左侧。

  • Breakfast
    Breakfast
  • Tasty burger
    Tasty burger
  • Camera
    Camera
  • Morning
    Morning
  • Hats
    Hats
  • Honey
    Honey
  • Vegetables
    Vegetables
  • Water plant
    Water plant
  • Mushrooms
    Mushrooms
  • Olive oil
    Olive oil
  • Sea star
    Sea star
  • Bike
    Bike