Angular Material 图片列表绗缝如何？

Question

正在尝试让我的 Angular 6 应用程序具有 material 设计，以获得具有 "quilted" 设计的图像列表。

有没有人有关于我如何实现这一目标的示例？

这是我看过的地方： Material IO Site - Design -Components - Image Lists

它显示各种类型的图像列表：标准、绗缝、编织和砌体。

我真的很喜欢绗缝风格的外观，但在任何地方都找不到我需要为绗缝视图添加哪些 html 元素以及我如何在 Angular 6.

如有任何建议，我们将不胜感激。

谢谢。

Answer 1

您可以使用 Angular Material Grid List。您可以通过使用 colspan 和 rowspan 属性绑定来实现这种绗缝风格外观。

这是一个这样做的例子：

模板：

<mat-grid-list cols="4" rowHeight="100px">
  <mat-grid-tile
      *ngFor="let tile of tiles"
      [colspan]="tile.cols"
      [rowspan]="tile.rows"
      [style.background]="tile.color">
    <img src="https://picsum.photos/200/300/?random">
  </mat-grid-tile>
</mat-grid-list>

分量：

import {Component} from '@angular/core';

@Component({...})
export class GridListDynamicExample {
  tiles: any[] = [
    {text: 'One', cols: 3, rows: 1, color: 'lightblue'},
    {text: 'Two', cols: 1, rows: 2, color: 'lightgreen'},
    {text: 'Three', cols: 1, rows: 1, color: 'lightpink'},
    {text: 'Four', cols: 2, rows: 1, color: '#DDBDF1'},
  ];
}

这里有一个 Sample StackBlitz 供您参考。

Angular Material 图片列表绗缝如何？

Angular Material Image List Quilted How To?

imagelist

material-design

angular