Framework7 4.2.0 Released! Meet Aurora

Hey guys! 4.2.0 update arrived with new Aurora desktop theme.

Blog post


  • All new Aurora theme! :desktop_computer::tada:
  • Core
    • New Appbar component
    • Button
      • New button-round-aurora, button-raised-aurora, button-fill-aurora, button-small-aurora, button-large-aurora, button-outline-aurora modifier classes for Aurora theme
    • Cards
      • Now it is possible to specify custom expandable card backdrop element with data-backrop-el attribute on card
    • Device
      • New device.electron property which is true when app runs in Electron environment
    • List Index
      • New auroraItemHeight parameter to specify item height in Aurora theme
    • Navbar
      • New auroraCenterTitle parameter (enabled by default) to position title at the center in Aurora theme.
    • Panel
      • New app.panel.toggle(side, animate) method to toggle (open or close) specified panel
      • New panel.toggle(animate) method to toggle (open or close) current panel
      • Support for panel-toggle class on links to toggle panels
    • Picker
      • New mousewheel parameter (enabled by default) to scroll picker values with mousewheel
      • New updateValuesOnMousewheel parameter (enabled by default) to updates picker and input values during mousewheel scrolling
    • Pull To Refresh
      • Added mousewheel support with additional data-ptr-mousewheel="true" attribute on PTR content element
    • Searchbar
      • New Inline Searchbar to fit it better within other components. Can be enabled by adding searchbar-inline class to searchbar
    • Stepper
      • New stepper-round-aurora, stepper-raised-aurora, stepper-fill-aurora, stepper-small-aurora, stepper-large-aurora modifier classes for Aurora theme
    • Toolbar
      • New toolbar-top-aurora and toolbar-bottom-aurora modifier classes for Aurora theme
    • Touch
      • Not it is possible to prevent active state bubbling on nested active-state elements with additional prevent-active-state-propagation class on nested active-state element
      • Improved clicks handling with Apple Pencil
    • Typography
      • New half-value margin and padding classes: margin-half, margin-left-half, margin-right-half, margin-top-half, margin-bottom-half, margin-horizontal-half, margin-vertical-half, padding-half, padding-left-half, padding-right-half, padding-top-half, padding-bottom-half, padding-horizontal-half, padding-vertical-half
    • View / Router
      • Router component’s $theme object now contains boolean aurora property which is true for Aurora theme
      • New Aurora-related parameters: auroraPageLoadDelay, auroraSwipeBack, auroraSwipeBackThreshold, auroraSwipeBackActiveArea, auroraSwipeBackAnimateShadow, auroraSwipeBackAnimateOpacity
      • Fixed VDOM rendering with SVG elements
  • Phenome
    • React and Vue’s component prototype $themeobject now contains boolean aurora property which is true for Aurora theme
    • New Appbar component
    • Button
      • New Aurora related modifier props: raisedAurora, roundAurora, largeAurora, smallAurora, fillAurora, outlineAurora
    • Icon
      • New aurora prop to specify icon for Aurora theme
    • Link
      • New iconAurora prop to specify icon for Aurora theme
    • ListIndex
      • New auroraItemHeight prop to specify item height in Aurora theme
    • Navbar
      • New boolean backLinkForce prop to load and ignore previous page in history
      • New boolean backLinkShowText prop to hide or show back button text. By default disable for MD theme
    • Page
      • New ptrMousewheel prop to make PTR work with mousewheel
    • Searchbar
      • New inline boolean prop to enable inline searchbar
    • Stepper
      • New Aurora related modifier props: raisedAurora, roundAurora, largeAurora, smallAurora, fillAurora
      • New iconAurora prop to specify icon for Aurora theme
    • Toolbar
      • New topAurora and bottomAurora boolean props to set Toolbar position for Aurora theme
  • Lots of minor fixed and improvements

@nolimits4web… awesome! Congrats!

1 Like

Brilliant! What an excellent release especially with Aurora!


Exactly what is needed! This is a big job!
Congratulations and thanks!


Very exciting! I can’t wait to work on a desktop app with Electron and this framework. Keep up the great work!

1 Like

Now that there is Aurora, it would be nice if there was a Electron boilerplate which includes F7 (F7/Vue, F7/React) and is re-useable :wink:

1 Like

Yes, yes. This is on my list. But the question here is which way of doing it we need to choose here.

Cordova recently added Electron support so I can just add “electron” platform and this is it, and couple new electron based app icons. This is most simple way and it won’t required any additional build steps and workflow changes. So most of config happens in same config.xml file.

But I guess here could be some limitations on Electron main process customization.

So other way is to add standalone Electron project generation, which will not produce any limitations. But it will be one more workflow.

Would be good to hear opinions of someone who tried both pure electron and cordova-electron. Maybe @gpetrov have more experience with them?

Well for all desktop apps that we have build with Electron or NWJS - the biggest challenge was always to get the installers and signing right. Also being able to submit to Mac AppStore/Windows App store is always a challenge - specially with NWJS.

Now with Cordova supporting Electron - you get installers out of the box! and also App Store deployments and signing! A developer dream comes true!


So now together with the great Framework7 and its Aurora theme, we can finally build full blown desktop apps, with installers and app stores support!

Of course Aurora has still a bit way to go to support more UI controls used more commonly on desktop, like resizable panels, containing toolbars, tabs, gris, forms, with auto sizing properties (more like

But I heard @nolimits4web is already working on this - so we are all set! :slight_smile:

WOW - this is great news!! I didn’t know Cordova supports electron! So I will check that first!
I also stumbled across this cli-project:

which looks promising - but it seems cordova-electron sounds even better :wink: