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

【问题标题】：Controlling spacing size in Vaadin 12/13 horizontal/vertical layouts在 Vaadin 12/13 水平/垂直布局中控制间距大小
【发布时间】：2019-02-21 18:04:02
【问题描述】：

在 Vaadin 12/13 中，我们可以通过调用 setSpacing(...) 来打开/关闭垂直/水平布局中的间距。但是，如果我们想要间距但要小得多的间距怎么办？我们如何（通过 Java）将间距设置为更小的数量？（对于边距和填充，我想出了 css - 这是一个直截了当的 this.getStyle().set("margin", "2rem") 或 this.getStyle().set("padding", "2rem") 等，但我无法弄清楚间距。此外，如果我们也运行 @987654324 是否“危险” @（如果我们这样做在我们编写的任何代码显式设置不同的间距值？）

【问题讨论】：

标签： vaadin vaadin12

【解决方案1】：

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

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

【讨论】：

【解决方案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

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

【讨论】：