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

时间:2019-01-23 14:21:33

标签: vaadin vaadin10 vaadin-flow vaadin12

我的理解是Vaadin 10+的主要主题之一是响应式布局。因此,当“水平布局”和“垂直布局”似乎不支持响应式设计时,我感到惊讶。 (我改用App Layout,这似乎可行。)但是,在我的App布局中,我倾向于使用Vertical Layouts和Horizo​​ntal Layouts放置聚合物组件-我想它们不会由于我不认为Vaadin的水平/垂直布局遵循响应式主题,因此它具有响应式。我们是否应该使用替代布局组件,或多或少地实现“响应式水平布局”等?

与此相关的合理假设是,假设所有预先构建的Vaadin 10/12 +聚合物组件(水平和垂直布局除外)都是自动响应的,例如网格,表单和选项卡,因此,例如,如果用户在手机上并且正在寻找一个标签,该标签具有这些Vaadin组件可以“很好地”呈现(即遵循其他框架(例如react.js等)响应式布局)的形式?

1 个答案:

答案 0 :(得分:4)

根据定义,水平或垂直布局无响应。其目的是将所有子项垂直或水平放置在同一行上,而与屏幕大小无关。

在适当情况下,Vaadin 10和更高版本中的各个组件都可以响应。例如,Date Picker中的日历弹出窗口会根据所使用的设备自动在全屏和常规模式之间切换。诸如Grid之类的其他组件在任何给定情况下都不知道什么合适。而是应用程序开发人员的责任,例如根据情况配置要使用的列。

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

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

相关问题