跳转到内容

Image list 图像列表

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

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

标准的图像列表

标准的图像列表最适合用于同等重要的项目。 它们具有统一的容器尺寸、比例和间距。

  • Breakfast
  • Burger
  • Camera
  • Coffee
  • Hats
  • Honey
  • Basketball
  • Fern
  • Mushrooms
  • Tomato basil
  • Sea star
  • Bike
Press Enter to start editing

拼接图像列表

拼接图像列表强调集合中的某些项目而不是之外的其他项目。 它们使用不同的容器尺寸和比例来创建层次结构。

  • Breakfast
  • Burger
  • Camera
  • Coffee
  • Hats
  • Honey
  • Basketball
  • Fern
  • Mushrooms
  • Tomato basil
  • Sea star
  • Bike
Press Enter to start editing

交织图像列表

交织图像列表使用交替的容器比率来创建一个有节奏的布局。 当需要浏览同行内容时,最好采用交织图像列表的方式。

  • Bed
  • Kitchen
  • Sink
  • Books
  • Chairs
  • Candle
  • Laptop
  • Doors
  • Coffee
  • Storage
  • Coffee table
  • Blinds
Press Enter to start editing

堆砌图像列表

堆砌图像列表使用动态调整大小的容器高度,以反映每个图像的纵横比。 该图像列表最适合用于浏览未被裁剪的同行内容。

  • Bed
  • Books
  • Sink
  • Kitchen
  • Blinds
  • Chairs
  • Laptop
  • Doors
  • Coffee
  • Storage
  • Candle
  • Coffee table
Press Enter to start editing

带标题栏的图像列表

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

  • December
  • Breakfast
    Breakfast
    @bkristastucchio
  • Burger
    Burger
    @rollelflex_graphy726
  • Camera
    Camera
    @helloimnik
  • Coffee
    Coffee
    @nolanissac
  • Hats
    Hats
    @hjrc33
  • Honey
    Honey
    @arwinneil
  • Basketball
    Basketball
    @tjdragotta
  • Fern
    Fern
    @katie_wasserman
  • Mushrooms
    Mushrooms
    @silverdalex
  • Tomato basil
    Tomato basil
    @shelleypauls
  • Sea star
    Sea star
    @peterlaster
  • Bike
    Bike
    @southside_customs

位于图像下方的标题栏(标准)

标题栏可以放置在图像下方。

  • Breakfast
    Breakfast
    by: @bkristastucchio
  • Burger
    Burger
    by: @rollelflex_graphy726
  • Camera
    Camera
    by: @helloimnik
  • Coffee
    Coffee
    by: @nolanissac
  • Hats
    Hats
    by: @hjrc33
  • Honey
    Honey
    by: @arwinneil
  • Basketball
    Basketball
    by: @tjdragotta
  • Fern
    Fern
    by: @katie_wasserman
  • Mushrooms
    Mushrooms
    by: @silverdalex
  • Tomato basil
    Tomato basil
    by: @shelleypauls
  • Sea star
    Sea star
    by: @peterlaster
  • Bike
    Bike
    by: @southside_customs

位于图像下方的标题栏(堆砌)

  • Bed
    swabdesign
  • Books
    Pavel Nekoranec
  • Sink
    Charles Deluvio
  • Kitchen
    Christian Mackie
  • Blinds
    Darren Richardson
  • Chairs
    Taylor Simpson
  • Laptop
    Ben Kolde
  • Doors
    Philipp Berndt
  • Coffee
    Jen P.
  • Storage
    Douglas Sheppard
  • Candle
    Fi Bell
  • Coffee table
    Hutomo Abrianto
Press Enter to start editing

自定义图像列表

在这个例子中,项目有一个自定义的标题栏,位于顶部,并有一个自定义渐变的 titleBackground。 而辅助操作的 IconButton 则位于左侧。 gap 属性用于调整项目之间的间隙。

  • Breakfast
    Breakfast
  • Burger
    Burger
  • Camera
    Camera
  • Coffee
    Coffee
  • Hats
    Hats
  • Honey
    Honey
  • Basketball
    Basketball
  • Fern
    Fern
  • Mushrooms
    Mushrooms
  • Tomato basil
    Tomato basil
  • Sea star
    Sea star
  • Bike
    Bike

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.