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 и:
- Основная документация Framework7
- Документация Framework7-Vue
- Документация Framework7-React
- Framework7 Forum - лучшее место для получения поддержки F7.
P.S.
Если вам нравится Framework7, пожалуйста, поддержите проект, сделав пожертвование на Patreon: https://www.patreon.com/framework7
Ваша поддержка очень много значит для нас!