我试图在一个页面中显示8个小网格。每个网格有2列和
4行,每个单元约2个字。
<mat-grid-list cols="2">
<mat-grid-tile>
hello world
</mat-grid-tile>
<mat-grid-tile>
hello world
</mat-grid-tile>
<mat-grid-tile>
hello world
</mat-grid-tile>
<mat-grid-tile>
hello world
</mat-grid-tile>
<mat-grid-tile>
hello world
</mat-grid-tile>
<mat-grid-tile>
hello world
</mat-grid-tile>
<mat-grid-tile>
hello world
</mat-grid-tile>
<mat-grid-tile>
hello world
</mat-grid-tile>
</mat-grid-list>
我对如何以令人愉悦的方式安排它们的其他建议持开放态度,但我的想法是:
我真的不知道如何做到这一点,这种设置和条件的正确方法是什么?
我甚至无法在一条线上显示2个网格,默认情况下网格会占用所有可用的网页宽度。
答案 0 :(得分:0)
您可以使用FlexLayout模块收听媒体更改并根据屏幕大小设置列数。然后将cols
值绑定到列数变量。 Here is a Stackblitz example
HTML:
<mat-grid-list [cols]="columns" rowHeight="2:1">
<mat-grid-tile>hello world</mat-grid-tile>
<mat-grid-tile>hello world</mat-grid-tile>
<mat-grid-tile>hello world</mat-grid-tile>
<mat-grid-tile>hello world</mat-grid-tile>
<mat-grid-tile>hello world</mat-grid-tile>
<mat-grid-tile>hello world</mat-grid-tile>
<mat-grid-tile>hello world</mat-grid-tile>
<mat-grid-tile>hello world</mat-grid-tile>
</mat-grid-list>
TS:
import { Component, OnDestroy } from '@angular/core';
import { MediaChange, ObservableMedia } from '@angular/flex-layout';
import { Subscription } from 'rxjs';
/**
* @title Flexible grid-list
*/
@Component({
selector: 'grid-list-flexible-example',
styleUrls: ['grid-list-flexible-example.css'],
templateUrl: 'grid-list-flexible-example.html',
})
export class GridListFlexibleExample implements OnDestroy {
watcher: Subscription;
columns: number = 4;
constructor(media: ObservableMedia) {
this.watcher = media.subscribe((change: MediaChange) => {
if (change) {
if (change.mqAlias == 'xs') {
this.columns = 2;
} else if (change.mqAlias == 'sm') {
this.columns = 3;
} else {
this.columns = 4;
}
}
});
}
ngOnDestroy() {
this.watcher.unsubscribe();
}
}