我正在使用 angular material 2 的网格列表.
这是plunker
https://plnkr.co/edit/0v9R3e4x3tThh85147x7?p=preview
在这里,我定义了一个三列的网格列表,并且有三个图 block (在一行中显示为定义为三列)。
我想更改图 block 的布局方向,例如如果屏幕尺寸在某个点缩小,那么所有图 block 都应该在另一列下方的第一列中,这在某种程度上是 cols
的值参数改为1。怎么可能?是否可以使用 flex-layout ?
最佳答案
仅适用于 div:
要将列更改仅应用于 div,请添加 elementRef
以 div 为例,#gridView
.使用此 ref 获取 width
包含网格列表的 div。然后我们可以使用[fxShow]
来自 flex-layout
当div
宽度改变并根据 div
的大小设置列号.
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;
}
}
demo完整视口(viewport):
是的,
flex-layout
是可能的.在我的测试中,我发现 fxLayout
api 不能很好地与 md-grid-list
配合使用,所以作为替代方案,我使用了 MediaChange, ObservableMedia
检测屏幕尺寸并基于此设置列号的功能。Edited Plunker , col size 更改为 2 和 1 用于屏幕尺寸
sm
和 xs
.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>
组件.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;
}
});
}
关于angular - 根据屏幕大小更改 md-grid-list 的布局或 cols 值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45188134/