Status Bar

Improve this doc

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

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

Manage the appearance of the native status bar.

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

Supported platforms

Usage

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

constructor(private statusBar: StatusBar) { }

...


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

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

Instance Members

overlaysWebView(doesOverlay)

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

Param Type Details
doesOverlay boolean

Whether the status bar overlays the main app view.

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.

Param Type Details
colorName string

The name of the color (from above)

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.

Param Type Details
hexString string

The hex value of the color.

hide()

Hide the StatusBar

show()

Show the StatusBar

isVisible

Whether the StatusBar is currently visible or not.

API

Native

General