Vaadin 12 中的水平和垂直布局不响应

Horizontal and Vertical Layouts are Not Responsive in Vaadin 12

我的理解是 Vaadin 10+ 的主题之一是响应式布局。所以当 "Horizontal Layout" 和 "Vertical Layouts" 似乎不支持响应式设计时,我感到很惊讶。 (我改用 App Layout,这似乎行得通。)但是,在我的应用程序布局中,我倾向于使用垂直布局和水平布局来放置聚合物组件——我认为它们但是不会响应,因为我认为 Vaadin horizontal/vertical 布局不遵循响应主题。是否有我们应该使用的替代布局组件或多或少实现了 "horizontal layout that's responsive" 等?

与此相关,假设所有预构建的 Vaadin 10/12+ 聚合物组件(水平和垂直布局除外)都是自动响应的,例如网格、表单和选项卡,是否合理?例如,如果用户在他的 phone 上并且正在查看一个选项卡,该选项卡具有这些 Vaadin 组件将呈现的表单 "nicely"(即遵循其他框架的响应式布局,例如 react.js) phone?

根据定义,水平或垂直布局是无响应的。它的目的是无论屏幕尺寸如何,都将所有子级垂直或水平地放在同一条线上。

Vaadin 10 和更新版本中的各个组件在适当的地方响应。例如,日期选择器中的日历弹出窗口会根据使用的设备自动在全屏和常规模式之间切换。其他组件(如 Grid)无法知道在任何给定情况下什么是合适的。相反,应用程序开发人员有责任,例如根据情况配置要使用的列。

根据屏幕尺寸定位不同组件的相对位置始终取决于通用组件无法处理的每个应用程序设计。有一些组件可以帮助在某些特定情况下实现这一点,例如表单布局、应用程序布局和看板。

如果提供的布局提供的通用模式不合适,则应用程序开发人员需要根据情况手动配置不同的组件或编写适应屏幕尺寸的CSS。与旧版本相比,这在 Vaadin 10+ 中仍然容易得多,因为旧版本严重依赖作为内联样式应用的像素计算,这与 CSS.

应用的更多动态定义的尝试相冲突。