控制Vaadin 12/13水平/垂直布局的间距尺寸

Question

在Vaadin 12/13中，我们可以通过调用setSpacing(...)来打开/关闭veritcal / horizo​​ntal布局中的间距。但是，如果我们想要间距但间距要小得多呢？我们如何（通过Java）将间距设置为更小的量？ （对于边距和填充，我想出了css - 它是一个直接的this.getStyle().set("margin", "2rem")或this.getStyle().set("padding", "2rem")等，但我无法弄清楚间距。另外，如果我们也运行setSpacing(true)（如果我们这样做）它是“危险的”吗？在我们写入explicilty的任何代码之前为间距设置不同的值？）

Answer 1

可能最简单的自定义间距的方法是使用本文档中描述的预定义自定义属性进行设置。如您所见，“填充”是正确的方法。

https://cdn.vaadin.com/vaadin-lumo-styles/1.4.1/demo/sizing-and-spacing.html#spacing

Answer 2

虽然在服务器/ JVM端编写所有内容看起来很诱人，但最终会使用样式操作乱丢代码。

通常，更好的地方可以设置类似应用程序的实际样式。现在这是一个例子（使用v13 beta 2，代码是Groovy - 只需要为元素添加一个主题）。

<dom-module id="vertical-layout-different-spacing" theme-for="vaadin-vertical-layout">
    <template>
        <style>
            :host([theme~="spacing"][theme~="xs"]) ::slotted(*) {
                margin-top: 8px;
            }
            :host([theme~="spacing"][theme~="xl"]) ::slotted(*) {
                margin-top: 32px;
            }
        </style>
    </template>
</dom-module>

def demoContent = { theme ->
    new VerticalLayout(
            *[1, 2, 3].collect{ new Div(new Text("Text $it")) }
    ).tap {
        element.themeList.add(theme)
    }
}
content.add(
        // styles `xs` and `xl` are defined in the style override
        demoContent('xs'),
        demoContent('m'),
        demoContent('xl'),
)

如果你正在使用Lumo并且你已经在v13上了，那么主题就有一个紧凑的变体，如果这就是你所追求的：

https://vaadin.com/releases/vaadin-13#compact-theme

如果您使用的是Material主题，那么已经内置了对不同间距的支持。见https://cdn.vaadin.com/vaadin-material-styles/1.2.0/demo/ordered-layouts.html;要添加的主题的名称是例如spacing-xl