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

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

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

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

Framework7 Core

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

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

Сейчас они:

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

Если вы используете классы модификаторов tablet-${n} и desktop-${n} в столбцах Layout Grid:

<div class="col-50 tablet-33 desktop-25">...</div>

они должны быть изменены на следующие:

<div class="col-50 medium-33 large-25">...</div>

То же самое для списков и блоков, если вы используете там класс tablet-inset, его необходимо изменить на medium-inset

<div class="list tablet-inset">...</div>
<div class="block tablet-inset">...</div>

следует изменить на:

<div class="list medium-inset">...</div>
<div class="block medium-inset">...</div>

Новые API боковых панелей

Функциональность панелей была полностью переработана, и теперь они больше похожи на модальные окна.

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

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

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

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

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

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

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

Новый API календаря

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

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

Удалены быстрые клики

Полностью удалена функция быстрых кликов. Следующие параметры приложения больше не поддерживаются: touch.fastClicks, touch.fastClicksDistanceThreshold, touch.fastClicksDelayBetweenClicks и touch.fastClicksExclude

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

Теперь он разрешает и отклоняет с другим объектом.

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

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

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

Framework7 Vue и React

Framework7 Lite

Это новая «облегченная» версия Framework7 Core, которая не содержит функций Core Component. И теперь рекомендуется использовать «облегченную» версию с пакетами F7-Vue / React:

import Framework7 from 'framework7/framework7-lite.esm.js';

или версия пакета:

import Framework7 from 'framework7/framework7-lite.esm.bundle.js';

Компоненты списка и блокировки

tabletInset prop был удален, и вместо него следует использовать новые свойства, основанные на новых точках останова: xsmallInset, smallInset, mediumInset, largeInset, xlargeInset

<List mediumInset>...</List>
<Block mediumInset>...</Block>

а также

<f7-list mediumInset>...</f7-list>
<f7-block mediumInset>...</f7-block>

Компонент Col

tabletWidth и desktopWidth реквизиты были удалены, и вместо них следует использовать новые реквизиты, основанные на новых отзывчивых точках останова: xsmall, small, medium, large, xlarge:

<Col size="50" medium="33" large="25">...</Col>

а также

<f7-col size="50" medium="33" large="25">...</f7-col>

Компонент панели

Панели получили новый API, поэтому основные параметры приложения, относящиеся к Panel, больше не актуальны, и все параметры панели должны быть определены в самой Panel:

Компонент строки состояния

Компонент строки состояния удален, так как его логика была переработана. Поэтому убедитесь, что вы не ссылаетесь на Statusbar / f7-statusbar компоненты в app.

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

Шрифт значков Framework7 Icons также был обновлен до новой версии 3 с более чем 800 новыми значками. Поскольку теперь он основан на символах SF от Apple, названия большинства значков были переименованы. Ознакомьтесь с Шпаргалкой по значкам Framework7 - на предмет новых значков v3. И вы все еще можете получить доступ к старой (v2) шпаргалке (для сравнения), загрузив последнюю версию значков 2.x из выпусков репозитория https://github.com/framework7io/framework7-icons/releases

Это все

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

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

P.S.

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

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