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:

    • On home-screen web apps Statusbar text color is always white. There is no way to change it.

    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 cordova-plugin-statusbar

    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

    app.statusbar.setTextColor(color)Set/change statusbar text color.
    • color - string - text color, can be white or black

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

    app.statusbar.setBackgroundColor(hex)Set/change statusbar background color
      app.statusbar.isVisible()Returns if system statusbar is visible and false when it is not visible