Show Tab Bar on pages not children of the tab bar

ionic-v1
1

Is there a way to do this? I’ve got some pages set up to not be associated with the tab bar, but I’d still like to display it. How would I go about doing that?

2

answering my own question: using an ng-include to the tab view in the individual page template works, but I suspect there may be an Ionic directive that does this without requiring some CSS cleanup. I had to add a class to the ng-include. I called it “footer-play-nice”. Then the following CSS was required:

.footer-play-nice .pane, .footer-play-nice .view{
    background-color:transparent;
}
3

Can you just navigate inside of that given tab?

4

Yes, but if a page is not a member of any tab bar group, you may still want to show the tab bar.

IE an info page or tutorial page. It wouldn’t make sense to have any tabs highlighted, so they don’t really belong part of any tab group. It may still make sense to show the tabs to let users get to those pages though.

Doing so with an ng-include requires the CSS fix mentioned to keep the tab’s sticky footer window from sitting on top of the current page’s content.

5

I am facing this same requirement, for example with a “my profile” page that is linked from a side bar and doesn’t really belong in a tab.

Modal alternative? It would be awkward as a modal since it has its own need for modals inside it.

Single page alternative, with no tabs shown? This could work but would need to hack a back button right?

Should I try the ng-include approach mentioned or does that no longer apply in the current Ionic? I’m not sure what I would include to get just the tabs.

6

I faced this issue a second time with a new app I’m working on. What I discovered is that it’s easiest to just re-use the Controller and template file, but create a new route. Having multiple URLs under different tabs to the same page I believe is the proper solution.

7

Here is a proof of concept for what I think you are describing, does that look right?

And the relevant parts of code follow. Hopefully there’s a cleaner way.

    .state('tabs.profile1', {
      url: "/profile1",
      views: {
        'home-tab': {
          templateUrl: "profile.html"
        }
      }
    })
    .state('tabs.profile2', {
      url: "/profile2",
      views: {
        'about-tab': {
          templateUrl: "profile.html"
        }
      }
    })
    .state('tabs.profile3', {
      url: "/profile3",
      views: {
        'contact-tab': {
          templateUrl: "profile.html"
        }
      }
    })

…

controller('TabsCtrl', function($scope, $state) {
  $scope.is_on_profile = function() {
    if ($state.current.name) return $state.current.name.match(/tabs.profile/);
  };
 $scope.open_profile = function() {
   if ($state.current.views['home-tab']) return $state.go('tabs.profile1');
   if ($state.current.views['about-tab']) return $state.go('tabs.profile2');
   if ($state.current.views['contact-tab']) return $state.go('tabs.profile3');

 };
})

…

   <ion-nav-bar class="nav-title-slide-ios7 bar-positive" ng-controller="TabsCtrl">
      <ion-nav-back-button class="button-icon ion-arrow-left-c">
      </ion-nav-back-button>
      <a class="button" ng-click="open_profile()" ng-show="!is_on_profile()">Profile</a>
    </ion-nav-bar>
1 Like
8

Actually this approach runs into further trouble when you have links within these templates (which in turn are used by multiple tabs). Those links would not have a consistent target URL if the URL is associated with a specific tab.

9

You can try “$ionicTabsDelegate.showBar(true/false);” Reference

10

is there any solution for this in ionic 2 ???