Question

在Vaadin 12/13中，我们可以通过调用setSpacing(...)在纵向/水平布局中打开/关闭间距。但是，如果我们要的是间距却要少得多的间距怎么办？我们如何（通过Java）将间距设置为更小的值？（对于页边距和填充，我弄清楚了css －是一个简单的this.getStyle().set("margin", "2rem")或this.getStyle().set("padding", "2rem")等，但是我无法确定它的间距。而且，如果我们这样做会“危险”吗？还要运行setSpacing(true)（如果在之前我们编写的任何代码中为显式设置的间距设置不同的值？）

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上使用，则该主题有一个 compact 变体，如果您只想这样做：

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

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

在Vaadin 12/13水平/垂直布局中控制间距大小

2 个答案: