响应式 Vaadin 流网格

Question

网格很不错 table，非常适合桌面或 tablet 等宽屏幕。然而，当在较小的移动设备上显示时，网格将无法容纳超过几列。您是如何在您的应用程序中解决这个问题的？

table 堆栈模式听起来很有前途：https://responsivedesign.is/patterns/data-table-stack/ 但是我如何使用 Vaadin Flow 实现它呢？是否可以根据屏幕尺寸将网格与项目列表交换？

Answer 1

我会选择媒体查询。这里有一个示例将它们包含在样式中：Media queries in Shadow dom

因此，例如，如果宽度小于某个预定义值，则将网格的 visibility 设置为 hidden，将 list 设置为 visible，反之亦然相反，在需要时。

编辑：还有一个插件可能有助于使用查询：Mediaquery

Answer 2

一种常见的方法是为移动设备和桌面设备设置单独的列。

在移动设备或其他窄屏幕上，可能只有一列以堆叠方式显示。这对于模板渲染来说非常简单，并且模板符合

<div>Name: [[item.name]]</div><div>E-mail: [[item.email]]</div>"

甚至可以将模板定义为 Polymer 模板 Web 组件，导入它，然后像这样设置模板渲染器

<mobile-column item="[[item]]"></mobile-column>

要切换列，可以添加一个调整大小的侦听器（最好是节流的），例如如定义 here.

MediaQuery 插件对此也非常有用。我建议在服务器上切换可见性，以避免发送不必要的数据并在浏览器中进行不必要的渲染。