根据屏幕大小更改 md-grid-list 的布局或 cols 值
Change the layout or cols value of md-grid-list based on screen size
我正在使用 angular material 2 的网格列表。
这是个笨蛋
https://plnkr.co/edit/0v9R3e4x3tThh85147x7?p=preview
这里我定义了一个三列的网格列表,一共有三个图块(按定义为三列显示在一行中)。
我想更改图块的布局方向,例如如果屏幕尺寸在某个点缩小,那么所有图块都应位于另一列下方的第一列中,cols
参数的值以某种方式更改为1、怎么可能?是否可以使用 flex-layout ?
仅适用于div:
要仅将列更改应用于 div,请将 elementRef
添加到 div,例如 #gridView
。使用此 ref 获取包含网格列表的 div 的 width
。然后我们可以在 div
宽度变化时使用 flex-layout
中的 [fxShow]
并根据 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;
}
}
全视口:
是的,flex-layout
是可能的。在我的测试中,我发现 fxLayout
api 不能很好地与 md-grid-list
配合使用,因此作为替代方案,我使用它的 MediaChange, ObservableMedia
功能来检测屏幕尺寸和设置列基于此的数字。
Edited Plunker,屏幕大小 sm
和 xs
.
的列大小更改为 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;
}
});
}
另一种选择是使用 Covalent's media queries 更改列数。
它可能看起来像这样:
<md-grid-list cols="_mediaService.query('gt-sm') ? 3 : 2" 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>
此外,您似乎不明白<md-grid-list works>
它是如何处理布局的。您不需要将 fxLayout 与它一起使用。
列数取决于(改变)宽度 mat-grid-list 可以这样设置:
在 html 中:
<div #theContainer>
<mat-grid-list cols="{{columnNum}}">
<mat-grid-tile *ngFor="let aTile of allTiles">
...
</mat-grid-tile>
</mat-grid-list>
</div>
在 TS 中:
@ViewChild('theContainer') theContainer;
columnNum = 3; //initial count
tileSize = 230; //one tile should have this width
setColNum(){
let width = this.theContainer.nativeElement.offsetWidth;
this.columnNum = Math.trunc(width/this.tileSize);
}
//calculating upon loading
ngAfterViewInit() {
this.setColNum();
}
//recalculating upon browser window resize
@HostListener('window:resize', ['$event'])
onResize(event) {
this.setColNum();
}
为了动态更新 md-grid-list
的列大小,我为 md-cols-gt-sm
和 md-cols-sm
放入变量,然后在我的控制器中更新它们。例如,它们看起来像
md-cols-gt-sm="{{nav.variable}}" md-cols-sm="{{nav.variable}}"
干杯
我正在使用 angular material 2 的网格列表。
这是个笨蛋 https://plnkr.co/edit/0v9R3e4x3tThh85147x7?p=preview
这里我定义了一个三列的网格列表,一共有三个图块(按定义为三列显示在一行中)。
我想更改图块的布局方向,例如如果屏幕尺寸在某个点缩小,那么所有图块都应位于另一列下方的第一列中,cols
参数的值以某种方式更改为1、怎么可能?是否可以使用 flex-layout ?
仅适用于div:
要仅将列更改应用于 div,请将 elementRef
添加到 div,例如 #gridView
。使用此 ref 获取包含网格列表的 div 的 width
。然后我们可以在 div
宽度变化时使用 flex-layout
中的 [fxShow]
并根据 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;
}
}
全视口:
是的,flex-layout
是可能的。在我的测试中,我发现 fxLayout
api 不能很好地与 md-grid-list
配合使用,因此作为替代方案,我使用它的 MediaChange, ObservableMedia
功能来检测屏幕尺寸和设置列基于此的数字。
Edited Plunker,屏幕大小 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>
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;
}
});
}
另一种选择是使用 Covalent's media queries 更改列数。
它可能看起来像这样:
<md-grid-list cols="_mediaService.query('gt-sm') ? 3 : 2" 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>
此外,您似乎不明白<md-grid-list works>
它是如何处理布局的。您不需要将 fxLayout 与它一起使用。
列数取决于(改变)宽度 mat-grid-list 可以这样设置:
在 html 中:
<div #theContainer>
<mat-grid-list cols="{{columnNum}}">
<mat-grid-tile *ngFor="let aTile of allTiles">
...
</mat-grid-tile>
</mat-grid-list>
</div>
在 TS 中:
@ViewChild('theContainer') theContainer;
columnNum = 3; //initial count
tileSize = 230; //one tile should have this width
setColNum(){
let width = this.theContainer.nativeElement.offsetWidth;
this.columnNum = Math.trunc(width/this.tileSize);
}
//calculating upon loading
ngAfterViewInit() {
this.setColNum();
}
//recalculating upon browser window resize
@HostListener('window:resize', ['$event'])
onResize(event) {
this.setColNum();
}
为了动态更新 md-grid-list
的列大小,我为 md-cols-gt-sm
和 md-cols-sm
放入变量,然后在我的控制器中更新它们。例如,它们看起来像
md-cols-gt-sm="{{nav.variable}}" md-cols-sm="{{nav.variable}}"
干杯