Different Header Bar Styles

ionic-v1
1

I’m developing an app using Ionic and have either stumbled upon a shortcoming in Ionic or something that hasn’t been documented. The issue is the ability to have different headers styles for individual views. My work around has been to include in each template, but this seems wrong. I’ve tried some of the class switching solutions (e.g. Changing nav-bar color from one view to another by setting a class), but these end up with a header bar that flashes and results in a non smooth color transition.

Am I missing something?
Thanks!
Doug

2

Take a look at this ?

3

Thanks!

I took the linked Codepen and edited it to illustrate my desired result. If you compare the two, you will see what I mean by “smooth color transition”. My work around involves hiding ion-nav-bar and including header content in a div in each template. Which seems wrong;)

http://codepen.io/anon/pen/azqwvp

4

@dosberg Oh in that case, there’s this way cleaner solution :

It’s based on the “Alternative Usage” of the ion-nav-bar which can be found at the bottom of this page

http://ionicframework.com/docs/api/directive/ionNavBar/

Have a great day

5

I explored that solution, but if you look at your example, the blue header disappears when you click on the “Scientific Facts” button.