5

我正在尝试将现有的 Vaadin 8 应用程序迁移到 Vaadin 12，并且需要知道如何在 Vaadin 12 中重新创建 Vaadin 8 的 GridLayout 的功能。

根据Vaadin Docs的说法，可以在 Vaadin 12 中将 GridLayout 替换为： “将 Div 与大多数浏览器支持的新 CSS Grid 功能一起使用”

不幸的是，目前尚不完全清楚如何做到这一点。

假设我有一个 Vaadin 复合“HelloGrid”：

@StyleSheet("styles/hello-grid.css")
public class HelloGrid extends Composite<Div> {

   public HelloGrid(){

     // EDIT: This line is my solution to the question
     getElement().getClassList().add("hello-grid");

     Label labelOne = new Label();
     labelOne.addClassName("label-one");

     Label labelTwo = new Label();
     labelTwo.addClassName("label-two");

     add(labelOne);
     add(labelTwo);
   }
}

还有一个 css 文件“hello-grid.css”：

.hello-grid {
    display: grid !important;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
}

.label-one {
    grid-column: 1;
}

.label-two {
    grid-column: 2;
}
  • 如何将“.hello-grid” css 类与 HelloGrid Composite 相关联。
  • 这是在 Vaadin 12 中使用 css 网格的正确/首选方式吗
4

1 回答 1

3

这有点太晚了，但也许可以回答别人的问题。

这取决于您将css样式放置在何处。我建议放置在 下webapp\frontend\styles，然后您就可以使用@StyleSheet("frontend://styles/hello-grid.css"). 正如官方文档中也指出的那样，这里包括样式表

相对于 Servlet URL

在此设置中使用您的示例：样式的文件位置

和类似的样式（基本上只是在样式表中添加颜色来验证，它可以工作）样式文件内容

这是输出： 在此处输入图像描述

我在 Vaadin 页面上没有找到任何确切的指南，关于如何使用 Grid 样式，但是本教程看起来很有希望A Complete Guide to Grid。否则，Vaadin 应该没有什么特别之处。

另外，目录中似乎有一个附加组件，可能有助于Css Grid Layout（通过，我自己没有尝试过）

于 2019-04-10T12:31:34.103 回答