Отзывчивый Vaadin Flow Grid

Question

Сетка - это хороший стол, который хорошо подходит для широких экранов, таких как рабочий стол или планшет. Однако при отображении на мобильном устройстве меньшего размера сетка не умещается более чем в несколько столбцов. Как вы решили эту проблему в своем приложении?

Шаблон стека звучит многообещающе: https://responsivedesign.is/patterns/data-table-stack/ Но как я могу реализовать это с Vaadin Flow? Есть ли возможность обмена сеткой со списком предметов в зависимости от размера экрана?

Answer 1

Обычный подход состоит в том, чтобы иметь отдельные столбцы для мобильных устройств и настольных компьютеров.

На мобильных или других узких экранах может быть только один столбец в режиме наложения. Это довольно просто сделать с помощью шаблонов, и шаблон в соответствии с

<div>Name: [[item.name]]</div><div>E-mail: [[item.email]]</div>"

Можно даже определить шаблон как веб-компонент шаблона Polymer, импортировать его и установить средство визуализации шаблона следующим образом.

<mobile-column item="[[item]]"></mobile-column>

Чтобы переключать столбцы, можно добавить прослушиватель изменения размера (предпочтительно с ограничением), например, как определено здесь .

Добавление MediaQuery Он также очень полезен для этого. Я рекомендую включить видимость на сервере, чтобы избежать отправки ненужных данных и выполнения ненужного рендеринга в браузере.

Answer 2

Я бы пошел с медиа-запросов. Здесь приведен пример включения их в стили: Медиа-запросы в Shadow dom

Так, например, если ширина меньше некоторого предварительно определенного значения, установите visibility изсетка до hidden и list до visible и наоборот, при необходимости.

Редактировать: есть также надстройка, которая может помочь в использовании запросов: Mediaquery