我正在使用
angular material 2的网格列表.
这是plunker
https://plnkr.co/edit/0v9R3e4x3tThh85147x7?p=preview
在这里,我定义了一个包含三列的网格列表,并且有三个切片(在一行中显示为三列).
我想改变瓷砖的布局方向,如果屏幕尺寸在某一点缩小,那么所有的瓷砖应该在另一个下面的第一列中,这是cols参数值的某种变化为1.它怎么可能？灵活布局是否可行？
仅适用于div：
要仅将列更改应用于div,请将div添加到div,例如#gridView.使用此ref来获取包含grid-list的div的宽度.然后我们可以在div宽度改变时使用flex-layout中的[fxShow],并根据div的大小设置col编号.
HTML：
<div style="background: skyblue"
#gridView
[ngStyle]="{ 'width.px': divSize }"
[fxShow]="setColNum(gridView.style.width)">
<md-grid-list [cols]="columnNum"
rowHeight="100px">
<md-grid-tile>
A
</md-grid-tile>
<md-grid-tile>
B
</md-grid-tile>
<md-grid-tile>
C
</md-grid-tile>
</md-grid-list>
</div>
TS：
@ViewChild('gridView') gridView;
columnNum = 3;
divSize = 900;
setColNum(div){
// console.log(div);
if(this.gridView.nativeElement.offsetWidth < 400){
this.columnNum = 1;
}
if(this.gridView.nativeElement.offsetWidth >= 400
&& this.gridView.nativeElement.offsetWidth < 800){
this.columnNum = 2;
}
if(this.gridView.nativeElement.offsetWidth >= 800){
this.columnNum = 3;
}
}
完整视口：
是的,可以使用flex-layout.在我的测试中,我发现fxLayout api与md-grid-list不兼容,所以作为替代方案,我使用它的MediaChange,ObservableMedia功能来检测屏幕大小并根据它设置列号.
Edited Plunker,对于屏幕尺寸sm和xs,col尺寸更改为2和1.
HTML：
<md-grid-list [cols]="columnNum"
rowHeight="100px">
<md-grid-tile>
A
</md-grid-tile>
<md-grid-tile>
B
</md-grid-tile>
<md-grid-tile>
C
</md-grid-tile>
</md-grid-list>
component.ts：
columnNum = 0;
constructor(media: ObservableMedia) {
media.asObservable()
.subscribe((change: MediaChange) => {
// alert(change.mqAlias);
console.log(change.mqAlias);
if(change.mqAlias == 'xs'){
this.columnNum = 1;
}
else if(change.mqAlias == 'sm'){
this.columnNum = 2;
}
else{
this.columnNum = 3;
}
});
}
