Styling ion-header-bar directive

ionic-v1
1

Changing style of CSS Header is very clear: http://ionicframework.com/docs/components/#header

Is it possible to do same thing with ion-header-bar directive? I looked at http://ionicframework.com/docs/angularjs/views/header/ but don’t see anything here about changing the style.

Thanks!

2

You can add your own class right to the directive.

This works great as this is the direction that the ionic guys are planning on moving it with 1.0

Note: I’m using important flags in the codepen because codepen applies your own css before it applies any your include.

3

There is a bit of a problem here though because you can’t seem to use the ion-header-bar and ion-nav-bar both. And it is not possible to style the ion-nav-bar based on different states.

4

@ajbraus I was going to point you to this post

But it appears you already got there :smile: i’ll ping the devs and see if this is still possible, I never played with it too much

5

So you can change the class of the nav-bar by using ng-class on it.

<ion-nav-bar ng-class="myclass">
 
</ion-nav-bar>

Then in a run function, set up your root scope

angular.module('ionicApp', ['ionic'])

  .run(function($rootScope) {
     $rootScope.myclass =  "bar-royal"
})
6

Worked great! Thanks!

I only had three screens with a different bar so I used a conditional and then set the $rootScope.barClass in each of the three controllers:

ng-class="(barClass) ? barClass : 'bar-positive'"
7

I also had to set the $rootScope.barClass on the other tabs and root nodes of my navigation because otherwise after the class was set it didn’t fall back to nil because rootScope carries between contexts.