Tabs navigation within a page

ionic-v1
1

Is it possible to have a tabbed navigation on a page?

I’m trying to upgrade from route based navigation to the new state based navigation. However, I’m having difficulty in implementing a tabbed view within a page. The tabbed content does not get loaded within the nav-view when abstract is set to true.

I’m trying to follow the documentation on http://ionicframework.com/docs/angularjs/controllers/view-state/, but when I try to adapt the code in the example in my app, it just doesn’t work, leaving me to wonder, is it at all possible to implement a tabbed view within a page?

2

Are you trying to achive a tabbed view within a page or would a page within a tabbed view also work?

3

A tabbed view in a page. In fact, I’m trying to have two pages that both have 3 tabs in them.

4

I think each page must use the $stateProvider service as per this: http://ionicframework.com/docs/angularjs/controllers/view-state/

But your tabs per page must be the original Ionic method of this:
http://ionicframework.com/docs/angularjs/controllers/tab-bar/

e.g.

<view title="'Info'">
  <tabs tabs-type="tabs-icon-only"
        tabs-style="tabs-primary">
    <tab title="Home" ></tab>   
    <tab title="About"></tab>    
    <tab title="Settings"></tab>
  </tabs>
</view>
5

Tried this, won’t work. I’m assuming it is currently not possible to have two or more tabbed controllers within a page based app. The docs could be a bit clearer on this.

6

Got it to work. Finally.

Here’s the code of my state configuration:

.state('timetable', {
  url: "/timetable",
		abstract : true,
  templateUrl: "templates/timetable.html",
	  controller: 'TimetableCtrl'	
})

.state('timetable.now', {
  url: "",
  views: {
    'now': {
      templateUrl: "templates/timetable_now.html",
      controller: 'TimetableNowCtrl'
    }
  }
})

.state('timetable.keyword', {
  url: "/keyword",
  views: {
    'keyword': {
      templateUrl: "templates/timetable_keyword.html",
      controller: 'TimetableKeywordCtrl'
    }
  }
})

.state('timetable.favorites', {
  url: "/favorites",
  views: {
    'favorites': {
      templateUrl: "templates/timetable_now.html",
      controller: 'TimetableFavCtrl'
    }
  }
})

Things to understand are that the URL’s of the tab views should be relative to the page that holds the tabs. So for the second tab, the URL is set to /favorites, and not /timetable/favorites. But in the template code you do link the tab to /timetable/favorites.

2 Likes
7

Thanks for sharing this @coen_warmer. This would be a good thing for @adam to see.

8

Hi @coen_warmer

Would you feel like sharing the HTML code to? Thanks