The 2017 Ionic Developer Survey Results are in!

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

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.

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