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