Я рассматриваю базовый пример md-grid-list в Angular 2.
Код HTML:
<md-grid-list cols="4" rowHeight="100px">
<md-grid-tile *ngFor="let tile of tiles"
[colspan]="tile.cols"
[rowspan]="tile.rows"
[style.background]="tile.color">
{{tile.text}}
</md-grid-tile>
</md-grid-list>
Код TS:
export class GridListDynamicExample {
tiles = [
{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'},
];
}
Приведенный выше код приводит к следующему: Как я могу сделать макет как "столбец", который является столбцом "Два", чтобы идти ниже строк (один и четыре) на меньший размер экрана, используя некоторую директиву HTML или CSS?
Angular Материал в Angular 1 имел возможность достичь, указав "md-cols-xs =" 1 "md-cols-sm =" 2 "md-cols-md =" 4 "md-cols- gt-md =" 6 "".