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

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

0 голосов
/ 21 февраля 2019

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

Ответы [ 2 ]

0 голосов
/ 25 февраля 2019

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

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

0 голосов
/ 22 февраля 2019

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

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

...