Question

尝试获取具有材料设计的Angular 6应用程序，以使图像列表具有“ quil缝”设计。

请问有人有我如何做到这一点的例子吗？

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

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

我真的很喜欢the缝样式的外观，但是找不到任何地方需要为the缝视图添加哪些html元素以及如何在Angular 6中做到这一点。

任何建议将不胜感激。

谢谢。

Answer 1

您可以使用Angular Material Grid List。您可以通过玩colspan和rowspan属性绑定来实现这种Qui缝样式外观。

这是一个这样做的例子：

模板：

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

角形材质图像列表Qui缝如何？

1 个答案: