Angular 5 Mat-grid 列表响应式 [英] Angular 5 Mat-grid list responsive

问题描述

我创建了第 6 列的网格列表，我希望网格标题在小屏幕设备上占据 100% 的宽度.现在它也可以在小屏幕上创建 6 列

i created grid list with column 6 and i want to be grid title take 100% width on small screen devices. Now it creates 6 column on small screens as well

预期:一个网格标题仅在移动设备上占据 100% 的空间

Expected: One grid-title occupies 100% of space on mobile device only

推荐答案

你必须根据屏幕动态设置 mat-grid-list 的 cols 属性宽度.您必须决定 mat-grid-list 渲染 1 列版本的宽度断点.

You have to set the cols attribute of the mat-grid-list dynamically depending on the screen width. You'd have to decide on which width breakpoint will the mat-grid-list render the 1-column version.

HTML:

<mat-grid-list [cols]="breakpoint" rowHeight="2:0.5" (window:resize)="onResize($event)">
  <mat-grid-tile>1</mat-grid-tile>
  <mat-grid-tile>2</mat-grid-tile>
  <mat-grid-tile>3</mat-grid-tile>
  <mat-grid-tile>4</mat-grid-tile>
  <mat-grid-tile>5</mat-grid-tile>
  <mat-grid-tile>6</mat-grid-tile>
</mat-grid-list>

TS:

ngOnInit() {
    this.breakpoint = (window.innerWidth <= 400) ? 1 : 6;
}

onResize(event) {
  this.breakpoint = (event.target.innerWidth <= 400) ? 1 : 6;
}

此处为 Stackblitz 演示

希望这有帮助！

这篇关于Angular 5 Mat-grid 列表响应式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！