Управление размером промежутка в горизонтальном / вертикальном расположении Vaadin 12/13

Question

В Vaadin 12/13 мы можем включить / выключить интервал в вертикальной / горизонтальной разметке, вызвав setSpacing(...), Но что, если нам нужен интервал, но гораздо меньший интервал? Как мы можем (через Java) установить расстояние намного меньше? (Для полей и отступов я разобрался с css - это прямолинейно this.getStyle().set("margin", "2rem") или же this.getStyle().set("padding", "2rem") и т.д., но я не мог понять это для расстояния. Кроме того, это "опасно", если мы также бежим setSpacing(true) (если мы сделаем это до того, как какой-либо код, который мы напишем в explicilty, установит другое значение для интервала?)

Answer 1

Вероятно, самый простой способ настроить интервал - это установить с помощью предопределенных пользовательских свойств, как описано в этом документе. Как видите, "padding" - это правильный путь.

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

Answer 2

Хотя писать все на стороне сервера /JVM кажется заманчивым, в конечном итоге вы засоряете свой код манипулированием стилем.

Обычно лучше настроить такие вещи в реальных стилях вашего приложения. Теперь это пример того, как это сделать (использует бета-версию v13, код 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

Если вы используете тему " Материал", то уже есть встроенная поддержка различных интервалов. См. https://cdn.vaadin.com/vaadin-material-styles/1.2.0/demo/ordered-layouts.html; Названия темы для добавления, например, spacing-xl