如何在 Vaadin GridLayout 中设置各个插槽的样式？

Question

我想在我的 GridLayout 中的某些插槽上设置边框。 如果我在插槽内的元素上设置边框（借助样式名称），则边框不会一直绘制。

如何访问封闭的 gridlayout-slot，以便每个其他插槽都有边框？

Answer 1

我建议你在 GridLayout 中放置一个 CssLayout 和这样的样式：

final GridLayout gridLayout = new GridLayout(2, 2);
// the size of the grid layout has to be defined, otherwise you can't place a relatively sized component inside it
gridLayout.setHeight("400px"); // example height
gridLayout.setWidth("100%"); // example width

final CssLayout border = new CssLayout();
border.setStyleName("myCellStyle");
// make the layout fill the whole slot
border.setSizeFull();
// wrap your content with that border layout
border.addComponent(new Label("forth"));
gridLayout.addComponents(
            new Label("first"), 
            new Label("second"),
            new Label("third"),
            border);

在你的 mytheme.scss 中写下你的边框样式：

.myCellStyle {
  border: 10px solid red;
}