И снова большое обновление 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 уже выпущена со всей обновленной документацией. Для получения более подробной информации проверьте следующие ссылки:
- Документация по палитре цветов
- Верхний лист модальной документации
- Документация по изменяемым размерам панелей
- Полный список изменений 4.3.0
P.S.
Если вам нравится Framework7, вы можете поддержать проект, сделав пожертвование на Patreon: https://www.patreon.com/framework7 или купив красивую фирменную футболку в Framework7 Shop.