在 Vaadin 12/13 horizontal/vertical 布局中控制间距大小

Question

在 Vaadin 12/13 中，我们可以通过调用 setSpacing(...) 在 veritcal/horizontal 布局中调整 on/off 间距。但是，如果我们想要间距但间距要小得多怎么办？我们如何（通过 Java）将间距设置得更小？（对于边距和填充，我想出了 css——这是一个直接的 this.getStyle().set("margin", "2rem") 或 this.getStyle().set("padding", "2rem") 等，但我无法弄清楚间距。另外，它是 "dangerous" 如果我们也运行 setSpacing(true) （如果我们这样做在我们编写的任何代码明确设置间距的不同值？）

Answer 1

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

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

Answer 2

虽然在 server/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

在 Vaadin 12/13 horizontal/vertical 布局中控制间距大小

Controlling spacing size in Vaadin 12/13 horizontal/vertical layouts

vaadin

vaadin12