И снова большое обновление Framework7 :) На этот раз добавлены новые компоненты пользовательского интерфейса, множество настроек и улучшений.

Палитра цветов

Да, наконец! Прибыл один из самых востребованных компонентов. Обновление 4.3.0 представляет новый совершенный модульный компонент Color Picker!

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

Поставляется со следующими модулями:

И вы можете создавать палитры цветов с любыми комбинациями этих модулей. Вот демонстрация кухонной раковины:

Боковые панели с изменяемым размером

Еще одна запрошенная функция приземлилась. Мы продолжаем улучшать работу с рабочим столом, и теперь размер боковых панелей можно изменять! И его очень легко включить, просто добавьте класс panel-resizable в элемент панели (или передайте resizable=true prop компоненту панели React / Vue) и все.

Автоматическая темная тема

Теперь Framework7 может автоматически включать / отключать темную тему в зависимости от предпочтений цветовой схемы пользовательской системы. Эта функция основана на prefers-color-scheme медиа-запросе, который пока не поддерживается широко, но уже реализован в последних версиях Safari и FireFox и будет добавлен в Chrome в следующих версиях.

Чтобы включить эту функцию, нам нужно передать параметр autoDarkTheme: true при инициализации приложения:

var app = new Framework7({
  autoDarkTheme: true,
  // ...
});

Вот как это работает (когда мы переключаем цветовую схему системы, в приложении применяется та же схема):

События навигационной панели

Теперь Navbar генерирует следующие события, которые могут быть полезны для обнаружения изменения его состояния:

  • navbar:hide / navbarHide - событие сработает, когда Navbar станет скрытым
  • navbar:show / navbarShow - событие сработает, когда Navbar станет скрытым
  • navbar:collapse / navbarCollapse - событие будет срабатывать при свертывании панели навигации с большим заголовком (от большой панели навигации к обычной панели навигации)
  • navbar:expand / navbarExpand - событие будет срабатывать при раскрытии панели навигации с большим заголовком (от обычной панели навигации до большой панели навигации)

Закройте модальные окна с помощью клавиши «Esc»

Еще одно улучшение рабочего стола. Теперь все модальные окна (Popup, Popover, Sheet Modal, Actions Sheet) можно закрыть с помощью ESC клавиши клавиатуры. Чтобы включить эту функцию, нам нужно передать closeOnEscape: true при создании модального окна, например:

var popup = app.popup.create({
  closeOnEscape: true,
  // ...
})

Улучшение фона модальных окон

Есть небольшое, но довольно полезное улучшение с фоном модальных окон (полупрозрачное темное наложение за модальным окном). Теперь, когда приложение работает в среде Cordova и установлен плагин клавиатуры Cordova:

  • Нажатие на модальный фон не приведет к закрытию модального окна, если была открыта виртуальная клавиатура. Скорее всего, пользователь ожидает здесь закрытия клавиатуры, а не модального окна.
  • Закрытие / открытие виртуальной клавиатуры будет правильно перемещать открытое в данный момент всплывающее окно.

Модальный верхний лист

По умолчанию модальное окно открывается снизу экрана. Теперь его также можно открыть сверху экрана. В этом случае нам просто нужно добавить класс sheet-modal-top к элементу листа.

Время обновлять

Версия Framework7 4.3.0 уже выпущена со всей обновленной документацией. Для получения более подробной информации проверьте следующие ссылки:

P.S.

Если вам нравится Framework7, вы можете поддержать проект, сделав пожертвование на Patreon: https://www.patreon.com/framework7 или купив красивую фирменную футболку в Framework7 Shop.