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

问题

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 ?

回答1:

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;
      }
    });
}

回答2:

Another option would be to change the number of columns using Covalent's media queries.

It could look something like this:

<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>

Also, you seem to not understand how <md-grid-list works> It takes care of the layout. You do not need to use fxLayout with it.

回答3:

The number of columns depending on (changing) width of a mat-grid-list can be set like this :

in html :

<div #theContainer>
     <mat-grid-list cols="{{columnNum}}">
            <mat-grid-tile *ngFor="let aTile of allTiles">
               ...
            </mat-grid-tile>
     </mat-grid-list>
</div>

in 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();
  }

回答4:

To dynamically update the column size of md-grid-list I put variables in for md-cols-gt-sm and md-cols-sm and then update them in my controller. For example they look like

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

Cheers

来源：https://stackoverflow.com/questions/45188134/change-the-layout-or-cols-value-of-md-grid-list-based-on-screen-size