Statusbar
Framework7 comes with statusbar component (wrapper around cordova-plugin-statusbar) that may help to customize app statusbar and its behavior.
This functionality is only available when app is running under cordova/phonegap environment with installed cordova-plugin-statusbar
Statusbar App Parameters
It is possible to control some default statusbar behavior by passing statusbar related parameters on app init under statusbar
property:
var app = new Framework7({
statusbar: {
iosOverlaysWebView: true,
},
});
Now let’s look at list of all available parameters
Parameter | Type | Default | Description |
---|---|---|---|
enabled | boolean | true | Enables statusbar handling by Framework7. Disable it if you don’t want Framework7 to handle statusbar behavior |
iosBackgroundColor | string | Hex string (#RRGGBB ) with background color when app running on iOS device. If passed then it will override CSS value | |
androidBackgroundColor | string | Hex string (#RRGGBB ) with background color when app running on Android device. If passed then it will override CSS value | |
scrollTopOnClick | boolean | true | If enabled, then click on statusbar overlay will scroll top page content to the top. |
iosOverlaysWebView | boolean | true | Makes the statusbar overlay or not overlay the WebView when app is running on iOS device. |
androidOverlaysWebView | boolean | true | Makes the statusbar overlay or not overlay the WebView when app is running on Android device. |
iosTextColor | string | black | Statusbar text color when app is running on iOS device. Can be |
androidTextColor | string | black | Statusbar text color when app is running on Android device. Can be |
Statusbar App Methods
After app initialization we can control statusbar by using statusbar related app methods:
app.statusbar.hide() | Hide statusbar |
app.statusbar.show() | Show statusbar |
app.statusbar.overlaysWebView(overlays) | Makes the statusbar overlay or not overlay the WebView
|
app.statusbar.setTextColor(color) | Set/change statusbar text color.
|
app.statusbar.setBackgroundColor(hex) | Set/change statusbar background color
|
app.statusbar.isVisible() | Returns true if system statusbar is visible and false when it is not visible |