0

在 Vaadin 12/13 中，我们可以通过调用setSpacing(...). 但是，如果我们想要间距但要小得多的间距怎么办？我们如何（通过 Java）将间距设置为更小的数量？（对于边距和填充，我想出了css——它是一个直截了当的 this.getStyle().set("margin", "2rem")等等this.getStyle().set("padding", "2rem")，但我无法弄清楚间距。此外，如果我们也运行它是否“危险” setSpacing(true)（如果我们在任何代码之前执行它我们写信明确地为间距设置不同的值？）

4

2 回答 2

1

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

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

于 2019-02-22T06:33:38.290 回答
1

虽然在服务器/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

于 2019-02-24T21:17:15.727 回答