Угловой список изображений материалов Стеганый Как? - PullRequest
Новая
       22

Угловой список изображений материалов Стеганый Как?

0 голосов
/ 29 ноября 2018

Пытаясь заставить мое приложение Angular 6 с дизайном материала иметь список изображений с «стеганным» дизайном.

У кого-нибудь есть пример того, как мне этого добиться, пожалуйста?

Вот где я посмотрел: Материал ввода-вывода сайта - Дизайн -Компоненты - Списки изображений

Здесь показаны различные типы списков изображений: стандартные, стеганные, тканые и масонские.

Мне действительно нравится внешний вид стеганого стиля, но я нигде не могу найти, какие HTML-элементы мне нужно добавить для стеганого вида и как я делаю это в Angular 6.

Любой совет будет оченьприветствуется.

Спасибо.

1 Ответ

0 голосов
/ 29 ноября 2018

Для этого можно использовать Угловой список материалов .Вы можете добиться этого стиля стеганого стиля, играя с привязками атрибутов 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'},
  ];
}

Вот Образец StackBlitz для вашей ссылки.

...