Адаптивная сетка Vaadin Flow

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

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


responsive-design vaadin vaadin-flow
person Steffen Harbich    schedule 21.10.2019    source источник

Ответы (2)


arrow_upward
4
arrow_downward

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

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

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

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

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

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

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

person Erik Lumme    schedule 21.10.2019
comment
На странице надстройки есть даже образец кода именно для этого варианта использования - переключения видимости столбца на основе медиа-запроса. Я не знал об этом надстройке MediaQuery, он отлично выглядит! - person kscherrer; 21.10.2019
comment
Это дополнение выглядит многообещающим в сочетании со скрытием столбцов и расширением строк на основе медиа-запросов. Спасибо! - person Steffen Harbich; 22.10.2019

arrow_upward
2
arrow_downward

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

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

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

person anasmi    schedule 21.10.2019
comment
Спасибо за ответ, надстройка выглядит многообещающей. - person Steffen Harbich; 22.10.2019