W Vaadin 12/13 możemy włączyć / wyłączyć odstępy w układzie Veritcal / poziomy, dzwoniąc setSpacing(...). Ale co jeśli chcemy odstępstwa, ale znacznie mniejsza ilość odstępów? Jak możemy (Via Java) ustawiliśmy odstępy do znacznie mniejszej ilości? (W przypadku marginesów i wyściółek, zorientowałem CSS - to proste this.getStyle().set("margin", "2rem") lub this.getStyle().set("padding", "2rem") itd., Ale nie mogłem tego zrozumieć na odstępy. Czy jest to "niebezpieczne", jeśli my Run RUN setSpacing(true) (jeśli to zrobimy przed dowolny kod, który piszemy do Ewilwiarstwa Ustaw inną wartość dla odstępu?)

0
Jonathan Sylvester 21 luty 2019, 21:04

2 odpowiedzi

Najlepsza odpowiedź

Prawdopodobnie najłatwiejszym sposobem na dostosowanie odstępu jest ustawione przy użyciu predefiniowanych właściwości niestandardowych, jak opisano w tym dokumencie. Jak widzisz, "wyściółka" jest właściwym sposobem na to.

https://cdn.vaadin.com/vaadin-lumo-styles/1.4.1/demo/size-and-SpaCing.html#paCing.

1
Tatu Lund 22 luty 2019, 06:33

Pisząc wszystkie rzeczy na stronie serwera / JVM wydają się kuszące, kończysz zaśmiecając kod z manipulacją stylu.

Zwykle lepsze miejsce należy ustawić takie rzeczy, które znajdują się w rzeczywistych stylach aplikacji. Jest to teraz przykład, aby to zrobić (wykorzystuje V13 Beta 2, kod jest Groovy - The Away Away jest tylko po to, aby dodać motyw do elementu).

<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'),
)

Jeśli używasz Lumo i jesteś już na V13, istnieje wariant motywu Compact , jeśli to wszystko, co jesteś po:

https://vaadin.com/releases/vaadin-13#compact-Theme.

Jeśli korzystasz z motywu Materiał , a następnie jest już wbudowany na wsparcie dla różnych odstępów. Zobacz https://cdn.vaadin.com /vaadin-material-styles/1.2.0/demo/ordered-layouts.html; Nazwy jest motywem, aby dodać to np. spacing-xl

1
cfrick 26 luty 2019, 11:03