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 hiddennavbar:show
/navbarShow
- event will be triggered when Navbar becomes hiddennavbar: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:
- Color Picker documentation
- Top Sheet Modal documentation
- Resizable Panels documentation
- Full 4.3.0 Changelog
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