角度材料引导程序，如网格 mat-grid-list

Posted 2023-02-22

【中文标题】角度材料引导程序，如网格 mat-grid-list

【英文标题】：angular material bootstrap like grid mat-grid-list

【发布时间】：2018-11-21 07:37:25

【问题描述】：

我正在尝试使用 angular 2 和 angular material 来实现 Bootstrap 样式的响应式屏幕。

考虑这个例子：https://getbootstrap.com/docs/4.0/examples/album/ 当我们调整窗口大小时，缩略图开始堆叠。

我正在使用 mat-grid-list 使用角度材料，我想实现相同的行为。

https://stackblitz.com/angular/oalnrrygvga?file=app%2Fgrid-list-dynamic-example.html

关于响应式布局网格定义的材料文档：

网格中显示的列数由 断点范围（预先确定的屏幕尺寸范围） 屏幕被查看，无论是手机、平板电脑的断点，还是 其他尺寸

1) 那么需要做些什么才能在 angular material 中获得与 bootstrap 相同的结果

我找到了一个解决方案： Responsive Design using md-grid-list in angular 2

这里他们使用非角度材质库或使用窗口大小事件。如果材料应该是响应式的，我们就不需要这样做。

所以有人可以帮我弄清楚如何以纯粹的物质方式完成它。

请看：我是前端设计的初学者，所以我不懂 UI 世界的许多行话。

谢谢

【问题讨论】：

使用 Angular Flex Layout 代替 mat-grid。如果要使用 mat-grid 并使其具有响应性，则需要根据屏幕大小重新计算列数。

为什么这个问题没有给出理由就被否决了？

【参考方案1】：

Angular Flex-Layout 以“Angular”的方式提供此功能。详情请见Displaying multiple grids in angular material。

【讨论】：

如前所述。 Angular Flex-layout 是一个更好的解决方案。 github.com/angular/flex-layout 示例：stackblitz.com/edit/…