Прокручиваемый макет в Vaadin Flow

В Vaadin Flow не существует компонента, который по сути является прокручиваемым макетом. В Vaadin 8 это было сделано с помощью Panel.

Есть ли способ получить прокручиваемый компонент в Vaadin Flow?


person kscherrer    schedule 19.12.2018    source источник


Ответы (1)


Изменить: я опубликовал надстройку здесь, который предоставляет класс VerticalScrollLayout, а также класс HorizontalScrollLayout. Если есть предложения по улучшению, не стесняйтесь обращаться ко мне или оставлять комментарии здесь.


Да, это возможно, хотя не существует компонента, который бы делал это автоматически.
Лучше всего разместить VerticalLayout (для вертикальной полосы прокрутки) внутри другого компонента и установить свойство display этого VerticalLayout от flex до block. (кредиты Диего Санс Виллафруэле на форуме vaadin)

Я создал свой собственный VerticalScrollLayout класс, который делает все это за вас, поэтому использовать его в представлении так же просто, как использовать простой VerticalLayout

public class VerticalScrollLayout extends VerticalLayout {
    private VerticalLayout content;

    public VerticalScrollLayout(){
        preparePanel();
    }

    public VerticalScrollLayout(Component... children){
        preparePanel();
        this.add(children);
    }

    private void preparePanel() {
        setWidth("100%");
        setHeight("100%");
        getStyle().set("overflow", "auto");

        content = new VerticalLayout();
        content.getStyle().set("display", "block");
        content.setWidth("100%");
        content.setPadding(false);
        super.add(content);
    }

    public VerticalLayout getContent(){
        return content;
    }

    @Override
    public void add(Component... components){
        content.add(components);
    }

    @Override
    public void remove(Component... components){
        content.remove(components);
    }

    @Override
    public void removeAll(){
        content.removeAll();
    }

    @Override
    public void addComponentAsFirst(Component component) {
        content.addComponentAtIndex(0, component);
    }
}
person kscherrer    schedule 19.12.2018
comment
Обратите внимание, что вы можете получить непредсказуемое поведение при объединении гибкого контейнера с overflow: auto. Более безопасный подход - обернуть гибкий контейнер и позволить элементу упаковки обрабатывать прокрутку. - person Jouni; 05.12.2019
comment
да, я слишком мало знаю о гибкости, чтобы понять, что именно вы имеете в виду, но я думаю, это причина того, почему это больше не работает в недавно выпущенной версии 14.1.0 - person kscherrer; 05.12.2019
comment
@Jouni Я помню, как видел официальный прокручиваемый макет, который планируется выпустить в 14.2 или 14.3? А пока не могли бы вы объяснить, что вы имеете в виду, или дайте мне ссылку, где я могу прочитать об этом? Это будет высоко ценится - person kscherrer; 05.12.2019
comment
Я сказал, что это больше не будет работать в 14.1.0, но это неправда. У меня возникла странная проблема, которая нарушила мой прокручиваемый макет, но она не была вызвана 14.1. 0. - person kscherrer; 06.12.2019