Framework7 4.3.0 - The Most Colorful Update

Large Framework7 update, again :) This time, there are new UI components, a lot of tweaks and improvements.

Color Picker

Yes, finally! One of the most requested components has been arrived. 4.3.0 update introduces all new ultimate modular Color Picker component!

With its modular structure and custom modules support you can create limitless combinations of color picker controls.

It comes with the following modules:

And you can create color pickers with any combinations of these modules. Here is the demo from Kitchen Sink:

Resizable Side Panels

One more requested feature landed. We continue to improve desktop experience and now side panels can be resizable! And it is super easy to enable it, just add panel-resizable class to panel element (or pass resizable=true prop to React/Vue panel component) and that is it.

Automatic Dark Theme

Now Framework7 can automatically enable/disable dark theme based on user system color scheme preference. This feature is based on prefers-color-scheme media query, which is not widely supported yet, but already implemented in latest versions of Safari and FireFox, and coming to Chrome in upcoming versions.

To enable this feature we need to pass autoDarkTheme: true parameter on app init:

var app = new Framework7({
  autoDarkTheme: true,
  // ...
});

This is how it works (when we switch system color scheme it applies same scheme in the app):

Navbar Events

Now Navbar emits the following events that can be useful to detect its state change:

  • navbar:hide / navbarHide - event will be triggered when Navbar becomes hidden
  • navbar:show / navbarShow - event will be triggered when Navbar becomes hidden
  • navbar:collapse / navbarCollapse - event will be triggered when Navbar with large title collapsed (from large navbar to usual navbar)
  • navbar:expand / navbarExpand - event will be triggered when Navbar with large title expanded (from usual navbar to large navbar)

Close Modals With "Esc" Key

One more desktop experience improvement. Now all modals (Popup, Popover, Sheet Modal, Actions Sheet) can be closed with ESC keyboard key. To enable this feature, we need to pass closeOnEscape: true when we create modal, for example:

var popup = app.popup.create({
  closeOnEscape: true,
  // ...
});

Modals Backdrop Improvement

There is some minor but pretty useful improvement with modals backdrop (semi-transparent dark overlay behind the modal). Now when app running in cordova environment and there is a cordova keyboard plugin installed:

  • Clicking on modal backdrop won't close modal if virtual keyboard was opened. More likely user expects here to close the keyboard rather than modal.
  • Closing/opening virtual keyboard will correctly reposition currently opened Popover

Top Sheet Modal

By default sheet modal opens from the bottom of the screen. Now it is also possible to open it from the top of the screen. In this case we just need to add sheet-modal-top class to sheet element.

Time To Update

Framework7 4.3.0 version already released with all the documentation updated. Check the following links for more details:

P.S.

If you love Framework7, you can support project by donating or pledging on Patreon: https://www.patreon.com/framework7 or by purchasing a nice branded t-shirt at Framework7 Shop