Framework7 stable 4.0.0 выпущен 7 февраля 2019 года, и пришло время обновиться!

Вам нужно обновить? Framework7 v4 нацелен на современные устройства с поддержкой настраиваемых свойств CSS. Поэтому, если ваше приложение нацелено на старые устройства iOS (‹10) и Android (‹ 5) или другие платформы, не поддерживающие эту технологию, вам не следует выполнять миграцию.

Давайте рассмотрим все критические изменения v3 - ›v4, чтобы увидеть, что нужно изменить, чтобы обновить ваше приложение до новой версии Framework7 v4.

Структура основных файлов Framework7

Если вы используете ES-модули, то можете пропустить этот раздел, здесь ничего не изменилось.

Основные файлы JS и CSS были немного переименованы и реструктурированы, поэтому вам нужно переименовать их в новые файлы в ваших тегах <link href="..."> и <script src="..."> на следующие:

framework7.css -> framework7.bundle.css
framework7.min.css -> framework7.bundle.min.css
framework7.lazy.css -> framework7.css
framework7.lazy.min.css -> framework7.min.css
framework7.js -> framework7.bundle.js
framework7.min.js -> framework7.bundle.min.js
framework7-lazy.js -> framework7.js
framework7-lazy.min.js -> framework7.min.js

И таблицы стилей RTL:

framework7.rtl.css -> framework7.bundle.rtl.css
framework7.rtl.min.css -> framework7.bundle.rtl.min.css
framework7.lazy.rtl.css -> framework7.rtl.css
framework7.lazy.rtl.min.css -> framework7.rtl.min.css

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

framework7.ios.css
framework7.md.css
framework7.ios.rtl.css
framework7.md.rtl.css

Настраиваемые свойства CSS (переменные CSS)

Это самая важная и сложная часть нового обновления. Все стили CSS были переработаны для использования переменных CSS (настраиваемые свойства). Он не должен нарушать какие-либо стили по умолчанию, которые были в v3. Но если у вас много нестандартных стилей, то некоторые из них могут стать недействительными. В версии 4 рекомендуется настраивать стили с помощью свойств CSS Custom.

В новой документации есть ссылки на CSS-переменные каждого компонента, как, например, в Документации по CSS-переменным кнопок. Также есть ссылка на все доступные переменные CSS.

Единое положение панелей инструментов

В темах iOS и MD панель инструментов / панель вкладок теперь можно располагать сверху или снизу. И теперь всегда требуется добавлять класс, зависящий от позиции, на каждую панель инструментов / вкладок:

  • toolbar-top для размещения Панели инструментов вверху просмотра / страницы
  • toolbar-bottom, чтобы разместить панель инструментов внизу просмотра / страницы

Кнопки

Модификатор кнопки big переименован в large в версии 4:

<button class="button button-big">...</button>
<f7-button big>...</f7-button>
<!-- need to be changed to -->
<button class="button button-large">
<f7-button large>...</f7-button>

Все модификаторы кнопок (raised, outline, fill, small, large) теперь одинаково поддерживаются как в темах iOS, так и в MD. Например, «приподнятая» кнопка, которая раньше работала только в теме MD, станет «приподнятой» и в теме iOS. Так что не забудьте настроить это поведение.

Быстрые клики отключены

Быстрые щелчки, встроенная библиотека, которая устраняет задержку в 300 мс для ссылок и элементов формы в мобильном браузере при нажатии на них, теперь отключена по умолчанию, чтобы избежать ненужных проблем, особенно со сторонними библиотеками. И его необходимо включить, если вы нацеливаетесь на старые устройства, такие как iOS ‹10, с параметром touch.fastClicks: true app.

Безопасные районы

Для правильной работы с безопасными зонами устройства были предусмотрены специальные ios-edges классы. Эта функция больше не предназначена только для iOS, поэтому эти классы тоже переименованы:

ios-edges -> safe-areas
ios-left-edge -> safe-area-left
ios-right-edge -> safe-area-right
no-ios-edges -> no-safe-areas
no-ios-left-edge -> no-safe-area-left
no-ios-right-edge -> no-safe-area-right

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

Единый стиль панелей навигации

В v4 мы унифицировали цветовую схему для панелей навигации (Navbar, Toolbar, Subnavbar) в темах iOS и MD. Поэтому вам нужно проверить и внести необходимые настройки стилей, если это нарушает ваши пользовательские стили.

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

Framework7 v4 предназначен для использования с Framework7 Icons v2. Поэтому, если вы используете этот иконочный шрифт, вам также необходимо обновить его до последней версии. Отметьте это сообщение в блоге, чтобы узнать больше о новом шрифте для иконок.

Изменения в компонентах Framework7 React и Vue

Компонент f7-label / Label был удален. Он использовался вместе с компонентом f7-input / Input для создания входных данных в представлении списка. Теперь вместо этого компонента нам нужно использовать новый f7-list-input / ListInput, который недавно был представлен в последних версиях Framework7 v3.

Итак, если у вас есть что-то вроде этого (например, во Vue):

<f7-list-item>
  <f7-label>Name</f7-label>
  <f7-input
    type="text"
    :value="userName"
    placeholder="Your name"
    @input="updateUserName"
  />
</f7-list-item>

Его нужно заменить на новый отдельный компонент:

<f7-list-input
  label="Name"
  type="text"
  :value="userName"
  placeholder="Your name"
  @input="updateUserName"
/>

Это оно

Да, здесь не так много критических изменений, но есть много новых функций. Проверьте сообщение в блоге Что нового в версии 4, если вы его пропустили.

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

P.S.

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