menu

Tabs in Ionic

  • date_range 18/07/2015 00:00 info
    sort label

Open a page in same tab. In app.js create a new state having same tab name as mention above in the code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.state('tab.demo', {
    url: '/demo',
    views: {
    'tab-demo': {
        templateUrl: 'templates/dummy-main.html',
        controller: 'DummyCtrl'
        }
    }
})
.state('tab.demo', {
    url: '/demo',
    views: {
    'tab-demo': {
        templateUrl: 'templates/dummy.html',
        controller: 'DummyCtrl'
        }
    }
});

In tabs.html ion-tab has a ion-nav-view element inside of it. The ion-nav-view is where our child states (the views of our app) will be inserted and If we call ionic view content from tabs.html it acts as main tab view and if we call it from anywhere else then it open in the same tab with a back button at the top. We can have number of pages under same tab in ionic defined in app.js.