角度材料图像列表绗缝如何？-Java 学习之路

试图通过材料设计获得我的Angular 6应用程序，以获得具有“绗缝”设计的图像列表 .

有没有人有一个如何实现这个目标的例子？

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

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

我非常喜欢Quilted风格的外观，但无法找到我需要为绗缝视图添加的html元素以及我如何在Angular 6中执行此操作 .

任何建议将非常感谢 .

谢谢 .

1 回答

您可以使用Angular Material Grid List . 您可以通过使用 colspan 和 rowspan 属性绑定来实现此Quilted Style外观 .

这是一个关于这样做的例子：

Template:

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

Component:

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 .

回复于 2024-05-10T13:00:05+08:00

角度材料图像列表绗缝如何？

1 回答

相关问题