根据屏幕大小更改 md-grid-list 的布局或 cols 值

Question

我正在使用 angular material 2 的网格列表。

这是个笨蛋 https://plnkr.co/edit/0v9R3e4x3tThh85147x7?p=preview

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

我想更改图块的布局方向，例如如果屏幕尺寸在某个点缩小，那么所有图块都应位于另一列下方的第一列中，cols 参数的值以某种方式更改为1、怎么可能？是否可以使用 flex-layout ？

Answer 1

仅适用于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;
  }
}

demo

全视口：

是的，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;
      }
    });
}

Answer 2

另一种选择是使用 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 与它一起使用。

Answer 3

列数取决于（改变）宽度 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();
  }

Answer 4

为了动态更新 md-grid-list 的列大小，我为 md-cols-gt-sm 和 md-cols-sm 放入变量，然后在我的控制器中更新它们。例如，它们看起来像

md-cols-gt-sm="{{nav.variable}}" md-cols-sm="{{nav.variable}}"

干杯

根据屏幕大小更改 md-grid-list 的布局或 cols 值

Change the layout or cols value of md-grid-list based on screen size

angular

grid

angular-material2

angular-flex-layout