如何在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;
}