由於特定寬度而更改 Mat-Grid 的布局順序

Question

我想在我的項目中使用 Mat-Grid 作為網格布局。它像我希望的那樣靈活且響應迅速。因為所有框的收縮率都與我希望的相同。但是當屏幕為 425 像素時（可以在 PC 瀏覽器或移動）我想看到網格中的所有盒子都是垂直的而不是水平的。我可以這樣做嗎？我的另一個問題是可以安排盒子之間的間隙嗎？

在下面的示例中，您可以看到https://stackblitz.com/edit/angular-tekgya?file=app/grid-list-overview-example.html

當寬度為 425px 時，它應該如何出現在下面

Answer 1

您可以使用 rxjs fromEvent function 訂閱 window.resize 事件：

fromEvent(window, 'resize')
.pipe(
  map(event => (event.target as any).innerWidth),
  startWith(window.innerWidth)
).subscribe(width => {
  this.columns = width <= 425 ? 1 : 3;
});

並在您的 html 文件中將cols分配給columns屬性

<mat-grid-list [cols]="columns" rowHeight="2:2" gutterSize="10">

還使用gutterSize定義元素之間的間距。

請記住取消訂閱 window.resize 訂閱。