Status Bar

Improve this doc

Manage the appearance of the native status bar.

Requires Cordova plugin: cordova-plugin-statusbar. For more info, please see the StatusBar plugin docs.

Repo: https://github.com/apache/cordova-plugin-statusbar

Installation

1. Install the Cordova and Ionic Native plugins:
   

   $ ionic cordova plugin add cordova-plugin-statusbar
   $ npm install --save @ionic-native/status-bar
   

2. Add this plugin to your app's module

Supported platforms

• Android
• iOS
• Windows
• Windows Phone

Usage

import { StatusBar } from '@ionic-native/status-bar';

constructor(private statusBar: StatusBar) { }

...

// let status bar overlay webview
this.statusBar.overlaysWebView(true);

// set status bar to white
this.statusBar.backgroundColorByHexString('#ffffff');

Instance Members

overlaysWebView(doesOverlay)

Set whether the status bar overlays the main app view. The default is true.

styleDefault()

Use the default statusbar (dark text, for light backgrounds).

styleLightContent()

Use the lightContent statusbar (light text, for dark backgrounds).

styleBlackTranslucent()

Use the blackTranslucent statusbar (light text, for dark backgrounds).

styleBlackOpaque()

Use the blackOpaque statusbar (light text, for dark backgrounds).

backgroundColorByName(colorName)

Set the status bar to a specific named color. Valid options: black, darkGray, lightGray, white, gray, red, green, blue, cyan, yellow, magenta, orange, purple, brown.

iOS note: you must call StatusBar.overlaysWebView(false) to enable color changing.

backgroundColorByHexString(hexString)

Set the status bar to a specific hex color (CSS shorthand supported!).

iOS note: you must call StatusBar.overlaysWebView(false) to enable color changing.

hide()

Hide the StatusBar

show()

Show the StatusBar

isVisible

Whether the StatusBar is currently visible or not.