Statusbar

    iOS 7+ allows you to have make full screen apps. But there could be such problem when statusbar overlap your app:

    Not good!

    Good!

    Statusbar - 图2

    Framework7 helps you to solve this issue. It automatically detects if your app in full screen mode, and automatically adds class to <html> element if app is in full screen mode (or removes this class if app is not in full screen mode).

    With this **with-statusbar** class (when app in full screen mode) the app root element has additional padding on top to move a whole app’s content on size of Statusbar.

    Now, when Framework7 did its job on this part, we can control Statusbar behavior, we need to add **<div class="statusbar">** as a direct child of app root element:

    This **statusbar** div is always fixed on top of screen and hidden by default. It becomes visible only when app is in full screen mode and html has with-statusbar class.

    Such logic allows pretty flexible control over Statusbar background and we can change its background dynamically.

    For example, we have dark left-side panel with cover effect. We may change Statusbar background to more dark color when panel opened:

    • In cordova apps Statusbar text color is always black by default. It can be with cordova plugin cordova-plugin-statusbar and using its api or Framework7 Statusbar API

    It is possible to control some default statusbar behavior by passing statusbar related parameters on app init under property:

    Now let’s look at list of all available parameters

    After app initialization we can control statusbar by using statusbar related app methods:

    app.statusbar.hide()Hide statusbar. In webapp it just hides statusbar overlay, but in cordova app it will hide statusbar at all.

    Hiding device statusbar is available when app is running under cordova/phonegap environment with installed

    app.statusbar.show()Show statusbar
    app.statusbar.overlaysWebView(overlays)Makes the statusbar overlay or not overlay the WebView
    • overlays - boolean - does it overlay or not

    This functionality is only available when app is running under cordova/phonegap environment with installed cordova-plugin-statusbar

    app.statusbar.setTextColor(color)Set/change statusbar text color.

      This functionality is only available when app is running under cordova/phonegap environment with installed

      app.statusbar.setBackgroundColor(hex)Set/change statusbar background color
      • hex - string - Hex string (#RRGGBB) with background color
      app.statusbar.isVisible()Returns if system statusbar is visible and false when it is not visible

      Below is the list of related CSS variables (CSS custom properties).