响应式 Vaadin 流网格

Question

网格是一张漂亮的桌子，非常适合台式机或平板电脑等宽屏幕。但是，当在较小的移动设备上显示时，网格将无法容纳超过几列。您在应用程序中是如何解决这个问题的？

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

Answer 1

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

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

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

甚至可以将模板定义为 Polymer 模板 Web 组件，导入它，然后设置一个模板渲染器，如下所示

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

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

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