Can't use tabs with lists


#1

I am just getting started with ionic but I want to have one page that has tabs, and on the rest of the pages, I do not want them. I tried this:

<ion-view title="Places">
  <ion-nav-buttons side="left">
    <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
  </ion-nav-buttons>
  <ion-content class="has-header">
    <ion-list>
    	<ion-refresher
	    pulling-text="Pull to refresh..."
	    on-refresh="doRefresh()">
	  </ion-refresher>
      <ion-item ng-repeat="place in places" href="#/app/place/{{playlist.id}}">
        <div class="image-left"></div>{{place.title}}
      </ion-item>
    </ion-list> 
     
  </ion-content>
  <ion-tabs class="tabs-positive tabs-icon-only">
  <ion-tab title="List" icon-on="ion-social-buffer" icon-off="ion-social-buffer"></ion-tab>
  <ion-tab title="Map" icon-on="ion-ios7-location" icon-off="ion-ios7-location-outline"></ion-tab>
</ion-tabs> 
</ion-view>

But it does not show the content, if I move it inside of the it does not show the icons. Please advise. Thanks :slight_smile:


#2

You shouldn’t have 2 “pages” in the same ion-view. They need to be in separate views and then when you navigate to each state, only that view’s template should be provided.


#3

Thanks for the reply. In this case, where I make them two separate “pages” the tab menu will persist on all pages. I want to use the tabs ui component on a subset of pages. Is this not possible?


#4

That’s not the case at all. See this route :

    .state('signin', {
      url: "/sign-in",
      templateUrl: "sign-in.html",
      controller: 'SignInCtrl'
    })

That route will have it’s own view. It will not have any tabs associated with it. If you want another route with no tabs, just duplicate it.