🔥 Meet Our New Project: t0ggles - Your Ultimate Project Management Tool!

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

ParameterTypeDefaultDescription
enabledbooleantrueEnables statusbar handling by Framework7. Disable it if you don't want Framework7 to handle statusbar behavior
iosBackgroundColorstringHex string (#RRGGBB) with background color when app running on iOS device. If passed then it will override CSS value
androidBackgroundColorstringHex string (#RRGGBB) with background color when app running on Android device. If passed then it will override CSS value
scrollTopOnClickbooleantrueIf enabled, then click on statusbar overlay will scroll top page content to the top.
iosOverlaysWebViewbooleantrue

Makes the statusbar overlay or not overlay the WebView when app is running on iOS device.

androidOverlaysWebViewbooleantrue

Makes the statusbar overlay or not overlay the WebView when app is running on Android device.

iosTextColorstringblack

Statusbar text color when app is running on iOS device. Can be white or black

androidTextColorstringblack

Statusbar text color when app is running on Android device. Can be white or black

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
  • 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