Ionic hide nav-bar not the buttons

2019-02-20 10:18发布

问题:

I am trying to find a possible way to hide the ionic ion-nav-bar without hiding the ion-nav-barbuttons.
I have tried

hide-nav-bar="true"

but it is hiding buttons too. I have searched and also referred this, but nothing solved my problem.
regards.

回答1:

You just have to specify what state want to hide the bar, and modify some styles

JS:

$rootScope.$on('$stateChangeStart', function(ev, toState, toParams, fromState, fromParams){

    var states = ['tabs.about', 'tabs.contact'];

    if(states.indexOf(toState.name) > -1) {
      $rootScope.hideBar=true;
    } else {
      $rootScope.hideBar=false;
    }
});

HTML:

<ion-nav-bar class="bar-positive" ng-class="{ 'make-border-trasparent': hideBar }">
  <ion-nav-back-button>
  </ion-nav-back-button>
</ion-nav-bar>

Please take a look at this example (I'm hiding the bar in the tabs.about and tabs.contact states)

Codepen