调整Vaadin小部件之间的间距

Question

Vaadin间距

Vaadin布局有一个方法setSpacing( true )，可以将小部件彼此分开。在大多数情况下效果很好。但是在多个Table对象的情况下，它们仍然有点过于拥挤。

  

➜有没有办法增加特定布局中使用的间距？

CSS

我希望答案是对CSS的调整。在Book of Vaadin上的Layout Formatting页面中，最后一部分布局边距讨论了边距的CSS。但我找不到关于间距的CSS的讨论。

Answer 1

是的，您可以增加Vaadin组件/小部件之间的间距。如何操作取决于特定的布局类型。请参阅每种布局的文档。

对于HorizontalLayout and VerticalLayout，请将.v-spacing选择器与height或width规则一起使用。

VerticalLayout（和FormLayout）

.v-vertical > .v-spacing {
    height: 30px;
}

HorizontalLayout

.v-horizontal > .v-spacing {
    width: 50px;
}

Answer 2

在已编译的css文件中：

.YourThemeName.v-app .v-vertical > .v-spacing {
    height: 30px;
}