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/capacitor 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 `white` or `black`
androidTextColor	string	black	Statusbar text color when app is running on Android device. Can be `white` or `black`

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 overlays - boolean - does it overlay or not
app.statusbar.setTextColor(color)	Set/change statusbar text color. color - string - text color, can be `white` or `black`
app.statusbar.setBackgroundColor(hex)	Set/change statusbar background color hex - string - Hex string (`#RRGGBB`) with background color
app.statusbar.isVisible()	Returns `true` if system statusbar is visible and `false` when it is not visible

On this page