+ StatusBar
+
+
+
+
+
+
+
+
+ `
+})
+export class StatusBarPage {
+ constructor() {
+ this.styles = [
+ StatusBar.DEFAULT,
+ StatusBar.LIGHT_CONTENT,
+ StatusBar.BLACK_TRANSLUCENT,
+ StatusBar.BLACK_OPAQUE
+ ];
+ this.currentStyle = 0;
+
+ this.colorHex = '#fff';
+ }
+ hide() { StatusBar.hide(); }
+ show() { StatusBar.show(); }
+ toggleOverlays() {
+ this.doesOverlay = !!!this.doesOverlay;
+ StatusBar.setOverlays(this.doesOverlay);
+ }
+ setStyle() {
+ StatusBar.setStyle(this.styles[++this.currentStyle]);
+ }
+ setColor() {
+ console.log('Setting color', this.colorHex);
+ StatusBar.setHexColor(this.colorHex);
+ }
+}
diff --git a/ionic/native/plugins.ts b/ionic/native/plugins.ts
index 7a3b3c79c8..cb126056a9 100644
--- a/ionic/native/plugins.ts
+++ b/ionic/native/plugins.ts
@@ -7,4 +7,5 @@ export * from './device/device'
export * from './device-motion/device-motion'
export * from './device-orientation/device-orientation'
export * from './geolocation/geolocation'
+export * from './statusbar/statusbar'
export * from './vibration/vibration'
diff --git a/ionic/native/statusbar/statusbar.ts b/ionic/native/statusbar/statusbar.ts
new file mode 100644
index 0000000000..76172bd54e
--- /dev/null
+++ b/ionic/native/statusbar/statusbar.ts
@@ -0,0 +1,108 @@
+import * as Rx from 'rx';
+
+import * as util from 'ionic/util';
+import {NativePlugin} from '../plugin';
+
+/**
+ * Manage the appearance of the native status bar.
+ */
+@NativePlugin({
+ name: 'StatusBar',
+ platforms: {
+ cordova: 'cordova-plugin-statusbar'
+ }
+})
+export class StatusBar {
+ static DEFAULT = 0
+ static LIGHT_CONTENT = 1
+ static BLACK_TRANSLUCENT = 2
+ static BLACK_OPAQUE = 3
+
+ /**
+ * Show the StatusBar
+ */
+ static show() {
+ this.ifPlugin(window.StatusBar, () => {
+ window.StatusBar.show();
+ })
+ }
+
+ /**
+ * Hide the StatusBar
+ */
+ static hide() {
+ this.ifPlugin(window.StatusBar, () => {
+ window.StatusBar.hide();
+ })
+ }
+
+ /**
+ * Hide the StatusBar
+ *
+ * Options:
+ *
+ * StatusBar.DEFAULT
+ * StatusBar.LIGHT_CONTENT
+ * StatusBar.BLACK_TRANSLUCENT
+ * StatusBar.BLACK_OPAQUE
+ *
+ * @param style the style from above
+ */
+ static setStyle(style) {
+ this.ifPlugin(window.StatusBar, () => {
+ switch(style) {
+ case StatusBar.DEFAULT:
+ window.StatusBar.styleDefault();
+ break;
+ case StatusBar.LIGHT_CONTENT:
+ window.StatusBar.styleLightContent();
+ break;
+ case StatusBar.BLACK_TRANSLUCENT:
+ window.StatusBar.styleBlackTranslucent();
+ break;
+ case StatusBar.BLACK_OPAQUE:
+ window.StatusBar.styleBlackOpaque();
+ break;
+ }
+ })
+ }
+
+ /**
+ * Set the status bar to a specific hex color (CSS shorthand supported!).
+ *
+ * iOS note: you must call StatusBar.setOverlay(false) to enable color changing.
+ *
+ * @param hex the hex value of the color.
+ */
+ static setHexColor(hex) {
+ this.ifPlugin(window.StatusBar, () => {
+ window.StatusBar.backgroundColorByHexName(hex);
+ });
+ }
+
+ /**
+ * 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.setOverlay(false) to enable color changing.
+ *
+ * @param name the name of the color (from above)
+ */
+ static setNamedColor(name) {
+ this.ifPlugin(window.StatusBar, () => {
+ window.StatusBar.backgroundColorByName(name);
+ });
+ }
+
+ /**
+ * Set whether the status bar overlays the main app view. The default
+ * is true.
+ *
+ * @param doesOverlay whether the status bar overlays the main app view.
+ */
+ static setOverlays(doesOverlay) {
+ this.ifPlugin(window.StatusBar, () => {
+ window.StatusBar.overlaysWebView(doesOverlay);
+ });
+ }
+}