Пришло крупное обновление Framework7 🎉!

В этом посте мы рассмотрим, что нового в v5.

Framework7 Lite

Пакет Core Framework7 теперь содержит новые так называемые -lite файлы JavaScript. «Облегченная» версия в основном такая же, как и обычная, но с одним отличием - она ​​не содержит функций компонента маршрутизатора и связанных с ним функций (виртуальный дом, маршруты с componentUrl и т. Д.).

Эта «облегченная» версия предназначена для использования с библиотеками Framework7-React и Framework7-Vue, где вы в любом случае используете компоненты React или Vue, поэтому переход на «облегченную» версию сэкономит дополнительные КБ в приложениях F7-React / Vue. .

import Framework7 from 'framework7/framework7-lite.esm.js';
import Framework7Vue from 'framework7-vue';
Framework7.use(Framework7Vue);

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

CSS и тематика

Есть много настроек и исправлений CSS и тематики:

  • Цвета темной темы iOS переработаны, чтобы соответствовать цветам темной темы iOS 13
  • Большинство переменных CSS, относящихся к цветам (особенно «серые» цвета), переработаны в rgba цвета, чтобы они лучше отображались в пользовательских дизайнах. Это связано с цветами текста, цветами фона, цветами значков, цветами границ и волос.
  • Большинство 15px размеров темы iOS (отступы и поля списка / блоков) заменены на 16px.
  • Темную тему теперь можно исключить из пакета (кастомная сборка)
  • И легкая (по умолчанию) тема также может быть исключена из пакета (пользовательская сборка)

Новые отзывчивые точки останова

Появились новые системные точки останова, реагирующие на CSS. Это может быть критическое изменение.

Если вы помните, в предыдущей версии у нас был класс помощника, например tablet-inset, чтобы сделать врезку блока списка на экране размером с планшет, или tablet-50, чтобы сделать столбец сетки шириной 50% на экране размером с планшет.

В настоящее время это стало неактуальным, поэтому в v5 появился новый набор таких отзывчивых точек останова:

Сейчас они:

  • xsmall - ширина более 480 пикселей
  • small - ширина более 568 пикселей
  • medium - ширина более 768 пикселей
  • large - ширина больше 1024 пикселей
  • xlarge - ширина более 1200 пикселей

Итак, если мы хотим сделать врезку блока List на экранах планшетов, теперь нам нужно добавить к нему класс medium-inset.

То же самое и с сеткой. Теперь у нас больше контроля над размерами столбцов:

<div class="row">
  <div class="col-100 small-66 medium-50 large-25 xlarge-15">
    ...
  </div>
  ...
</div>

То же самое и с таблицей данных, у нас может быть больше элементов управления для отображения ячеек на экранах разных размеров:

<tr>
  <td>...</td>
  <td>...</td>
  <!-- show cell when screen width >= 768px -->
  <td class="medium-only">...</td>
  <!-- show cell when screen width >= 1024px -->
  <td class="large-only">...</td>
</tr>

Полупрозрачные полосы и модальные окна iOS

Framework7 v5 теперь поддерживает полупрозрачные панели навигации (Navbar, Toolbar, Subnavbar и т. Д.) И модальные окна (Dialog, Actions) для темы iOS и устройств iOS из коробки. И это по умолчанию включено.

Это может быть критическим изменением, если у вас есть собственные цвета полос, потому что в «полупрозрачном режиме» для этого используются другие переменные CSS. Таким образом, вы можете отключить полупрозрачные полосы и модальные окна, отключив параметры приложения iosTranslucentBars и iosTranslucentModals.

var app = new Framework7({
  iosTranslucentBars: false,
  iosTranslucentModals: false,
})

Новый макет панели навигации

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

В v5 контейнер Navbar должен иметь новый элемент navbar-bg, который должен быть помещен перед navbar-inner, а новый макет выглядит так:

Большая панель навигации (панель навигации с большим заголовком) теперь должна быть включена путем добавления класса navbar-large к элементу панели навигации:

Кроме того, было полностью переработано динамическое поведение навигационной панели в теме iOS. Теперь он не берет navbar-inner из панели навигации страницы, а занимает весь элемент панели навигации. Это упрощает настройку каждой панели навигации (цвет фона, цвет текста, линии волос (границы), тени), и такое поведение улучшает переходы между ними.

Большая прозрачная панель навигации

Появилась новая «прозрачная» модификация Large Navbar. Это делает Navbar и его поведение похожим на то, что есть в нативных приложениях Apple в iOS 13.

Чтобы сделать большой заголовок прозрачным, нам нужно добавить класс navbar-large-transparent в большую панель навигации:

Переработан макет строки состояния.

Элемент наложения строки состояния (<div class=”statusbar”>) и связанные с ним функции были удалены в пользу использования этого пространства панелями навигации и другими элементами, чтобы обеспечить полноценный полноэкранный режим и улучшенную настройку.

API Statusbar Cordova там, как и раньше.

Улучшенный календарь

Календарь существенно улучшен. Теперь он использует ECMAScript Internationalization API, а именно Intl.DateTimeFormat (для формата даты / времени, названий месяцев, названий дней и т. Д.).

Также в нем есть новые функции:

  • Новая функция выбора месяца (щелчок по названию месяца на панели инструментов откроет выбор месяца)
  • Функциональность выбора нового года (при нажатии на год на панели инструментов открывается окно выбора года)
  • Новая функция выбора времени (для выбора времени в дополнение к дате)

Посмотрите обновленные Документы календаря и демонстрационное видео ниже, в котором используется системный формат даты и времени с указателями месяца, года и времени:

Новый компонент текстового редактора

Framework7 v5 поставляется с новым сенсорным компонентом Rich Text Editor. Он основан на современном «contenteditable» API, поэтому должен работать везде как есть.

Он поставляется с базовым набором функций форматирования. Но его функциональность легко расширяется и настраивается под любые требования.

Push Popup

Появилось новое поведение всплывающего окна «Push». При открытии он выталкивает View (или Views) позади. Чтобы включить его, нам просто нужно передать push:true параметрам Popup или добавить класс popup-push в элемент Popup.

Эта функция работает только при наличии верхней безопасной зоны (например, когда safe-area-inset-top больше 0). Например, если на главный экран установлено полноэкранное приложение iOS Cordova или приложение iOS.

Кроме того, его можно включить в компонентах, которые используют всплывающее окно в качестве средства открытия содержимого. В таких компонентах, как Smart Select, Autocomplete, Color Picker, Photo Browser, мы можем передать openIn: 'popup' и popupPush: true, чтобы включить такое поведение «push».

Push Sheet Modal

Как и в случае с Popup, есть новое модальное поведение «Push» Sheet. При открытии он выталкивает View (или Views) позади. Чтобы включить его, нам просто нужно передать push:true в параметры Sheet или добавив класс sheet-modal-push в элемент Sheet.

Эта функция работает только при наличии верхней безопасной зоны (например, когда safe-area-inset-top больше 0). Например, если это полноэкранное приложение iOS Cordova или приложение iOS, установленное на главный экран.

Кроме того, его можно включить в компонентах, которые используют всплывающее окно в качестве средства открытия содержимого. В таких компонентах, как Smart Select, Calendar, Picker, Color Picker мы можем передать openIn: 'sheet' и sheetPush: true, чтобы включить такое поведение «push».

Сильно сегментированный

Существует новый «сильный» стиль для Segmented (ряд кнопок), который похож на собственный компонент iOS 13 Segmented:

Новый API подключения

Существует новый простой API подключения, который позволяет определить, подключено ли приложение к Интернету или нет.

Есть новое свойство app.online, которое true, когда приложение подключено к сети и есть новые события приложения online, offline и connection:

Больше никаких быстрых кликов

Библиотека Fast Clicks (для устранения задержки нажатия 300 мс) была отключена по умолчанию в Framework7 v4, а в версии 5 эта функция была полностью удалена, поскольку ни одно из современных устройств больше не нуждается в этом исправлении.

Запрос. Обещание

В Request Promise API внесены изменения. Теперь он разрешается и отклоняется с другим объектом. Это может быть критическое изменение.

  • Методы «обещания» запроса теперь будут разрешаться с помощью объекта { data, status, xhr } (а не просто data, как раньше)
  • Методы «обещания» запроса теперь будут отклоняться с объектом { message, status, xhr } (а не только с status, как раньше)

Пользовательские переходы между страницами

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

Встроены следующие дополнительные настраиваемые переходы страниц: f7-circle, f7-cover, f7-cover-v, f7-dive, f7-fade, f7-flip, f7-parallax, f7-push

Ознакомьтесь с документацией Пользовательские переходы между страницами, чтобы узнать о живых примерах и о том, как создавать собственные.

Переработанные панели

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

Глобальные параметры панели приложения (например, panel.swipe = 'left') больше не поддерживаются, и теперь каждая панель должна быть инициализирована отдельно, а параметры панели должны быть указаны для каждой панели. А для облегчения перехода можно автоматически инициализировать панель, добавив класс panel-init и указав параметры панели с атрибутами data-.

Например, если в v4 есть что-то подобное:

В v5 его необходимо изменить на следующее:

Также есть новая функция под названием collapsedBreakpoint, где мы можем указать ширину приложения, когда Panel становится частично видимой.

В любом случае, проверьте обновленные Документы панели на предмет новых API и примеров.

Новый Swiper v5

Лучший мобильный сенсорный слайдер стал еще лучше, и Framework7 v5 поставляется с недавно выпущенным Swiper v5. В нем есть множество новых функций и критических изменений. Рекомендуется проверить Swiper Changelog.

Самая интересная новая функция - это новый дополнительный режим CSS Scroll Snap (можно включить с помощью cssMode: true). Он не поддерживает все функции Swiper, но потенциально должен обеспечить гораздо лучшую производительность в простых конфигурациях. Посмотрите эту живую демонстрацию CSS Scroll Snap.

Компонент маршрутизатора

Основные компоненты маршрутизатора получили множество улучшений и новых функций.

Во-первых, теперь он поддерживает асинхронные данные (где он должен возвращать обещание). Это можно использовать, если нам нужно загрузить данные перед загрузкой компонента:

Компонентные обновления DOM теперь асинхронны. Это означает, что не гарантируется, что DOM будет обновлен сразу после вызова $setState. Существует новый метод $tick, который можно безопасно использовать для ссылки на DOM и обеспечения его обновления. Или теперь мы можем использовать новый второй аргумент обратного вызова в $setState

Добавлена ​​поддержка миксинов, которые можно повторно использовать в компонентах. Mixin может расширить ловушку, методы и data жизненного цикла любого компонента.

Добавлена ​​поддержка нового синтаксиса на основе классов для лучшей поддержки TypeScript:

И поддержка пользовательских компонентов многократного использования:

Новые иконки Framework7 v3

Как вы знаете, Apple недавно выпустила SF Symbols - набор официальных иконок для использования в приложениях iOS.

Официальные иконки действительно великолепны, а коллекция огромна. Мы взяли большинство из них для справки и обновили коллекцию иконок в новой версии Framework7 Icons v3.

Вся коллекция иконок Framework7 выросла с ~ 380 иконок до 1200+ иконок! Большинство иконок (из библиотеки SF) переименованы так, как они появляются в символах SF. Сейчас это может быть не очень понятно, но должно быть хорошо, когда к этому привыкнешь, например:

  • share >square_arrow_up
  • delete > minus
  • close > xmark
  • add > plus

Это может быть критическим изменением, поэтому взгляните на новую Шпаргалку по значкам Framework7 и обновите свои значки новыми.

Новый Framework7 CLI v3

Framework7 CLI также был обновлен со следующими новыми функциями:

  • Созданные шаблоны приложений обновлены до Framework7 v5
  • Созданные шаблоны приложений обновлены для использования значков Framework7 Icons v3
  • Обновите cordova backbuttonhandler. Теперь он закроет открытые модальные окна (если есть) или вернется в навигацию.
  • Обновлены имена скриптов, связанных с кордовой, например _67 _- ›build-dev-cordova
  • Добавлен псевдоним f7 для команды CLI. Теперь мы можем запустить его как f7 create --ui

Обновления пользовательского интерфейса CLI (--ui):

  • Добавлен новый текстовый редактор в пользовательские настройки сборки
  • Добавлены параметры для включения / исключения темных и светлых тем в пользовательской сборке.
  • Добавлена ​​возможность импортировать настройки проекта из файла JSON.
  • Добавлена ​​возможность экспортировать настройки проекта в файл JSON.

Прекращение поддержки шаблонов

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

Что следующее?

Это был лишь краткий обзор наиболее значительных изменений.

Также во всем Framework7 есть множество мелких улучшений и исправлений. Список всех изменений см. В полном журнале изменений v5, который также может быть полезен при переходе с предыдущей версии.

В качестве следующих шагов рекомендуется проверить следующие новые и обновленные документы Framework7 v5:

И документы в целом:

P.S.

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

Ваша поддержка очень много значит для нас!