/ionic-status-bar-decorators

Handy status bar decorators for your Ionic 2+ app!

Primary LanguageTypeScript

Ionic Status Bar Decorators

What Are They?

These decorators make managing status bar styling for your Ionic 2+ app simple and declarative. Rather than rewriting the same status bar initialization logic for every page, simply add one line above a page's class declaration.

How do I use them?

There are two primary decorators offered by this package: HideStatusBar and ShowStatusBar. Use them like so:

import { Component } from '@angular/core';
import { IonicPage } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { ShowStatusBar } from 'ionic-status-bar-decorators';

@IonicPage()
@Component({
  selector: 'my-page',
  templateUrl: 'my-page.html',
})
@ShowStatusBar({ color: 'light' })
// or @HideStatusBar() if that's what you need!
export class MyPage {
  constructor(
    public statusBar: StatusBar
  ) { } 
}

And that's it! Note that following important points:

  1. You must inject the StatusBar service into your page component as statusBar. Otherwise the decorator won't be able to pick up on it.
  2. You must make the decorator the first above the class declaration.

You can pass the following options to ShowStatusBar:

color: Either light or dark.

Setting Up the Example

Within the example directly run the following commands:

npm install

ionic cordova prepare

ionic cordova run ios

This will install the necessary dependencies and spool up an iOS simulator instance for you.