Горизонтальные и вертикальные макеты не реагируют на Vaadin 12

Question

Насколько я понимаю, одной из главных тем Vaadin 10+ была адаптивная верстка. Поэтому я был удивлен, когда «Горизонтальная компоновка» и «Вертикальная компоновка» не поддерживают адаптивный дизайн. (Я переключился на использование App Layout, и это, кажется, работает.) HOWEVER , в моем макете приложения я склонен использовать вертикальные макеты и горизонтальные макеты для размещения полимерных компонентов - я предполагаю, что они НЕ будут реагировать тем не менее, поскольку я не думаю, что горизонтальные / вертикальные макеты Vaadin следуют за адаптивной темой. Есть ли альтернативный компонент макета, который мы должны использовать, который более или менее реализует «горизонтальный макет, который реагирует» и т. Д.?

В связи с этим разумно предположить, что все готовые полимерные компоненты Vaadin 10/12 + (кроме горизонтальной и вертикальной компоновки) автоматически реагируют, такие как сетка, формы и вкладки, так что, например, если пользователь находится на своем телефоне и ищет вкладку с формами, которые эти компоненты Vaadin будут «красиво» отображать (т. е. следуя адаптивному расположению других платформ, таких как response.js) на телефоне?

Answer 1

Горизонтальное или вертикальное расположение по определению не отвечает.Его целью является размещение всех дочерних элементов на одной и той же линии, вертикально или горизонтально, независимо от размера экрана.

Отдельные компоненты в Vaadin 10 и новее реагируют там, где это необходимо.Например, всплывающее окно календаря в средстве выбора даты автоматически переключается между полноэкранным и обычным режимом в зависимости от используемого устройства.Другие компоненты, такие как Grid, не могут знать, что подходит в любом конкретном случае.Вместо этого разработчик приложения должен, например, настроить, какие столбцы использовать в зависимости от обстоятельств.

Позиционирование различных компонентов относительно друг друга в зависимости от размера экрана всегда зависит от дизайна приложения, который не может быть обработан универсальнымкомпоненты.Существуют некоторые компоненты, которые помогают достичь этого в некоторых конкретных случаях, например макет формы, макет приложения и плата.

Если общие шаблоны, предлагаемые предоставленными макетами, не подходят, то разработчику приложения необходимо вручную настроить компонентыпо-разному в зависимости от случая или написать CSS, который адаптируется к размеру экрана.Это все еще намного проще в Vaadin 10+ по сравнению с более старой версией, так как более старые версии в значительной степени полагались на пиксельные вычисления, которые применялись как встроенные стили, что противоречило попыткам применения более динамических определений из CSS.