[Blog] What is new in Framework7 v4

Hi guys!

Here is the pretty detailed overview of what is coming in v4. Check out this blog post:

Enjoy! :wink:

8 Likes

thank you
thank you
thank you

2 Likes

I can’t wait, especially the CSS variable (custom properties) !

But I also like the slick, fresh, cool and modern looking Framework 7 style/font/picture :sunglasses:

2 Likes

Серьезные изменения, огромный шаг вперед, грамотней использовать фреймворк становится труднее… Срочно нужна толстая книга “Best Pactice”.

В блоге говорится о iOS>=10, а на гитхабе была информация о проблемах в iOS 10: https://github.com/framework7io/framework7/issues/2937

Непонятны различия между новым menu и старым popover - возможно, там что-то большее, чем немного разный вид (в popover - стрелочка)

Skeleteon - я так понимаю, что его можно использовать только тогда, когда загрузился уже текст. Ведь заранее не известен размер текста или это не важно, а смысл просто показать “серые линии”.

В чем преимущество Events Bus перед app.on() / app.emit или же других событий с local:: пока не ясно.

1 Like

И фраза “Framework7 v4 is designed to be used with new F7 icons so they will perfectly fit here.” не понятна, теперь CSS и сам шрифт вшиты во фреймворк? Их теперь не нужно отдельно подключать?

1 Like

:smiley: Ну, труднее он не стал. Добавились новые компоненты. Все что было раньше (практически) , должно работать из коробки.

Menu - гораздо более упращенная версия Popover’a для конкретных целей, у нее практически нет никакого API (пока), просто HTML

Это не важно. Например, с List View, мы имеем строчку для того и для того. Можно написать просто “Lorem ipsum”, или “____ ____ ___”. И то и другое будет отображать серые линии. Для большого текста можно брать усредненное значение количества символов.

Ни в чем, для удобства. Особенно удобнее если используются ES модули, внутри которых не используется никакое API фреймворка, а данными/событиями нужно обмениваться

Нужно также отдельно подключать. Имеется ввиду что в тех места где предусмотрены эти иконки (List View, Tabbar, Navbar, …) учтены размеры и особенности новых иконок

1 Like

Сегодня специально это проверял. В 9-й есть проблема. В 10-й у меня все работает

В своем приложении обновился до v4. Согласно блогу, нужно переделать только toolbar-bottom-md => toolbar-bottom.

Перестал работать роутер с popup’ми:

{
path: ‘/page’,
popup : {
componentUrl: ‘./pages/page.html’
},
},

первый клик по ссылке - никакой реакции, второй - появляется в консоли TypeError: app[modalType] is undefined [framework7.js:7137:11]

Также views как табы перестали работать: загрузка идет к страницам (судя по консоли), только клик по табу не переключает view. Консоль без ошибок.

toggle отображаются нестилизованным,(как дефолтные checkbox). Ошибок в консоли - нет.

Стили к data table теперь другие, что-то с ними не то.

Обновил framework7.js (чтобы ошибки было легче искать) и framework7.min.css из https://github.com/framework7io/Framework7/releases/ beta 22 из файла framework7.tar.gz

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

А почему в framework7.min.css нет .row, col-50 и т.д?

Нужно использовать .bundle.js и .bundle.css. Об этом говорится в самом начале поста :wink:

Спасибо! Не так понял эту фразу

" In v4: Minimal core version now comes without any suffix and it is just framework7.js and framework7.css (what was with -lazy before). Full bundle version now has bundle in file name."

Thank you Vladimir for your great project! I have been waiting for Expandable Cards for a long time.
If you need help with the website, I am always ready to help :wink:

1 Like

Относительно переменных в CSS, штуки крайне интересной, такое предложение / вопрос:

–f7-font-size - размер шрифта по умолчанию
–f7-table-body-font-size -размер шрифта в body data table

Можно ли сделать так, чтобы –f7-table-body-font-size по умолчанию было равно –f7-font-size (также в list view, popup и всех других местах)? В этом случае мы могли поменять размер шрифта в одном месте или же установить разный. Сейчас оба эти значения равны 14px.

Вот нашел такой пример (тут такая же логика):
–f7-navbar-shadow-image: var(–f7-bars-shadow-bottom-image);

Vladimir v4 will have changes in the grid layout? I was watching to do web app and I saw that it has col-xx tablet-xx maybe something like web-xx for bigger screens? as in Bootstrap

1 Like

Thanks very!
I really like var-theme-color \skeleton \ ptr bottom \ navbar resize\ button menu \ F7.event method… in new version
Big surprise
I love F7

1 Like

Waow, really amazing!
Thank You for that great work.
I really like the harmonisation between iOs/MD and the new theming is really really a great step forward ! Thank You Vladimir.

1 Like

There is already desktop- sizes available, or we need more? http://framework7.io/docs/grid.html#column-sizes

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

Можно зафиксировать их у себя в CSS:

:root {
  --f7-font-size: 16px;
  --f7-table-body-font-size: var(--f7-font-size);
  ...
}

ouch. I did not see it. apparently v3 already has more than I need :slight_smile:

1 Like

@nolimits4web, is there a way we can have a ‘snackbar’ component? Useful when notifying slow/poor internet connection? Wanted to suggest this early but sorry, I didnt know its name… Thanks alot