Создание адаптивных веб-приложений с помощью Webix 1.8

Webix был обновлен до версии 1.8, которая включает в себя приятные бонусы для наших пользователей. Одни из них — это техники построения адаптивных приложений. В Webix 1.8 был также улучшен пользовательский интерфейс и исправлены некоторые ошибки.

Адаптивные веб-приложения

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

В Webix 1.8 мы добавили 2 новые возможности, которые сделают ваше приложение адаптивным и улучшат его юзабилити как на десктопных, так и на мобильных устройствах.

Для более подробного изучения новой функциональности библиотеки предлагаем вам рассмотреть адаптивное веб-приложение, созданное при помощи Webix.

Вот как выглядит десктопное веб-приложение:

webix 1.8 reponsive design

При уменьшении окна браузера вкладки компонента Tabbar, которые не вместились в видимую часть экрана, преобразуются в обычную кнопку, к которой прикреплен компонент popup list (вместо кнопки может быть вкладка таббара).

Таким образом, вы сможете найти скрытые элементы Tabbar (табы) по их названиям во всплывающем списке (в компоненте popup list).

webix reponsive web app

Следующим шагом к созданию адаптивных веб-приложений является использование адаптивных лайаутов (layouts).

Структура компонентов Webix, таких как Layout и Accordion, подстраивается под изменение размеров окна путем скрытия/показа или перемещения строк(столбцов) , в зависимости от доступного в данный момент свободного места в браузере.

Существует два варианта поведения адаптивного лайаута:

  • Панели лайаута и аккордиона скрыты и могут быть развернуты/показаны снова;
  • Панели лайаута и аккордеона перемещены в другую часть мобильного веб-приложения.

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

В нашем примере, десктопное приложение, представленное ниже
webix reponsive layout

в мобильной версии будет выглядеть вот так:

hidden responsive webix layout

Во втором случае, если вы откроете упоминаемое выше десктопное приложение на мобильном устройстве, панели лайаута переместятся в то место, которое вы зададите сами.

replaced-responsive-layouts

Улучшения в пользовательском интерфейсе

Новая функциональность была также добавлена в Webix Calendar. Теперь вы можете блокировать определенный диапазон дат.

webix calendar with disabled date range

Как видите, Webix 1.8 поможет вам сделать приложения полностью адаптивными и многофункциональными, позволяя создавать одинаково красивые десктопные и мобильные веб-приложения.

Прочитать более подробно о Webix версии 1.8 вы можете в нашей документации.

Скачать последнюю версию Webix.