根据屏幕大小更改md-grid-list的布局或cols值 [英] Change the layout or cols value of md-grid-list based on screen size

问题描述

我使用角质材料2 的网格列表。

这里是
https://plnkr.co/edit/0v9R3e4x3tThh85147x7?p=preview

在这里，我定义了三列的网格列表，并且有三个图块（显示在一行中定义为三列）。

我想更改拼贴的布局方向，就像屏幕尺寸在某个点缩小一样，然后所有瓷砖应该位于另一个下面的第一列中，它是 cols 参数变为1的值。这怎么可能？是否可以使用flex-layout？

解决方案

仅适用于div：

要将列更改仅应用于div，请向该div添加 elementRef ，例如 #gridView 。使用此引用来获取包含网格列表的div的宽度。然后，当 div 时，我们可以从 flex-layout 使用 [fxShow] c>宽度更改并根据 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

$ b

完整视口

是的，可以使用 flex-layout 。在我的测试中，我发现 fxLayout api在 md-grid-list 中表现不佳，因此另外，我使用了 MediaChange，ObservableMedia 功能来检测屏幕大小并根据它设置列数。

编辑Plunker ， col尺寸更改为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> 
  

component.ts：

  columnNum = 0; 
 
构造函数（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; 
} 
}）; 
} 
  

I am using Grid List of angular material 2.

Here is the plunker https://plnkr.co/edit/0v9R3e4x3tThh85147x7?p=preview

Here I have defined a grid list of three columns and there are three tiles (showing in a row as defined as three columns).

I want to change the layout direction of tiles like if the screen size gets shrunk at a certain point then all the tiles should be in column one below the other that is somehow value of cols parameter changed to 1. How is it possible? Is it possible with flex-layout ?

解决方案

Only for a div:

To apply column change only to a div, add an elementRef to the div for example, #gridView. Use this ref to get the width of the div containing the grid-list. Then we can use [fxShow] from flex-layout when div width changes and set the col number based on the size of the 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

Full Viewport:

Yes, it's possible with flex-layout. In my testing I found that the fxLayout api doesn't play well with md-grid-list, so as an alternative, I used it's MediaChange, ObservableMedia features to detect screen size and set column number based on that.

Edited Plunker, col size changes to 2 and 1 for screen size sm and 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;
      }
    });
}

这篇关于根据屏幕大小更改md-grid-list的布局或cols值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！