Ionic - Set Navbar Class to bar-assertive not working

Question

Your system information:

Cordova CLI: 6.0.0
Ionic Version: 1.2.4
Ionic CLI Version: 1.7.14
Ionic App Lib Version: 0.7.0
OS: Node Version: v5.5.0

<ion-view view-title="Change Header" class="bar-assertive">


  <ion-content>

    <ion-list>
        <ion-radio ng-model="color" ng-value="'bar-stable'">Stable</ion-radio>
        <ion-radio ng-model="color" ng-value="'bar-assertive'">Assertive</ion-radio>
        <ion-radio ng-model="color" ng-value="'bar-calm'">Calm</ion-radio>
    </ion-list>
    <span ng-bind="color"></span>
  </ion-content>
</ion-view>

As you can see the code above, I add class="bar-assertive" to ion-view tags, and the navbar should change color to red, but the result remain the same with previous. There's no change in background-color of the navbar

beaver beaver · Accepted Answer · 2016-02-03T08:07:32

You can set the nav-bar-color in your index with this code:

  <ion-nav-bar class="bar-assertive"></ion-nav-bar>

  <ion-nav-view></ion-nav-view>

If you need to customize nav-bar (i.e. apply a specific class) add an <ion-nav-bar> tag inside the <ion-view> you want with a custom nav bar:

<ion-nav-bar align-title="right" class="bar-positive">...</ion-nav-bar>

Here is an example: http://codepen.io/beaver71/pen/XXeydY

But if you want to set different color for each tabs/view you could also use ngClass and $stateChangeSuccess:

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

  <ion-nav-view></ion-nav-view>

In your app (in run section) you have to set $scope.headerClass according to the current state:

.run(function($state, $rootScope) {
  $rootScope.$on('$stateChangeSuccess', function (evt, toState) {
    if (toState.name == "xyz") {
      $rootScope.headerClass = 'bar-positive';
    } else {
      $rootScope.headerClass = 'bar-assertive';
    }
  });
})

Ionic - Set Navbar Class to bar-assertive not working

1 Answers