Nested tabs

Ionic Framework ionic-v3
1

Hi Guys,

I have a application which is using a bottom tabbar.

For 1 page i also want a top tabbar.

The tabbarPlacement config is not working so i use:

But the issue is that it places double ion-navs (one which is blacked out

image

2

For that second tabbar, have you tried the tabbarPlacement property?

<ion-tabs tabbarPlacement="top"></ion-tabs>

3

Yes i see it removed that from my first comment.

This is the root

<ion-tabs>
    <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
   <ion-tab [root]="tab2Root" tabTitle="Zoeken" tabIcon="search"></ion-tab>
   <ion-tab [root]="tab3Root" tabTitle="Plaatsen" tabIcon="camera"></ion-tab>
   <ion-tab [root]="tab4Root" tabTitle="Activiteit" tabIcon="heart"></ion-tab>
   <ion-tab [root]="tab5Root" tabTitle="Profiel" tabIcon="contact"></ion-tab>
</ion-tabs>

import {Page} from 'ionic-angular';
import {Home} from '../home/home';
import {Search} from '../search/search';
import {PlaceAd} from '../page3/page3';
import {Activity} from '../activity/activity';
import {Profile} from '../profile/profile';
import {HelloIonicPage} from '../hello-ionic/hello-ionic';
@Page({
  templateUrl: 'build/pages/tabs/tabs.html'
})
export class TabsPage {
  constructor() {
    // this tells the tabs component which Pages
    // should be each tab's root Page
    this.tab1Root = Home;
    this.tab2Root = Search;
    this.tab3Root = PlaceAd;
    this.tab4Root = Activity;
    this.tab5Root = Profile;
  }
}

This is the sub page

<ion-navbar *navbar>
  <ion-title>Search</ion-title>
</ion-navbar>
<ion-tabs tabbarPlacement="top">
  <ion-tab [root]="tab1Search" tabTitle="ADVERTENTIES"></ion-tab>
  <ion-tab [root]="tab2Search" tabTitle="PERSONEN"></ion-tab>
</ion-tabs>

import {Page} from 'ionic-angular';
import {SearchAdvertisements} from '../searchAdvertisements/searchAdvertisements';
import {SearchPeople} from '../searchPeople/searchPeople';
@Page({
  templateUrl: 'build/pages/search/search.html',
  config: {
    tabbarPlacement: 'top',
  }
})
export class Search {
  constructor() {
    // this tells the tabs component which Pages
    // should be each tab's root Page
    this.tab1Search = SearchAdvertisements;
    this.tab2Search = SearchPeople;
  }
}
4

Alright. I’d really avoid this kind of layout.

Nested tabs inside of nest tabs can just become a bit of a headache.

You could use something like the segment control instead for a much simpler layout

1 Like
5

Ah i see, that would be a good solution.

Only in Ionic 1 i used the tabs because i could animate the transition (on drag)
Is that also possible with ion-segment?

6

Is that black thing really an ion-nav or just a css margin? If so, why don’t you just apply a custom css class to the top tabs and pull them up? We’re moving an Ionic v1.x app with this layout to v2 . We’ve been using that simple css fix in v1.x without problems, since we need the subtabs to have their own state (for using viewEvents, tracking states, etc)… now I’m wondering which one is the most elegant solution in Ionic 2…

Did you find major problems with nested tabs in v2? or did you go with segmented control?

7

@chrisbongers Did you ever find a good way to do this? I am running into the same issue where my users want a page that has a nested tab inside it. Tried ion-segment but the lack of transition and not looking like tabs is confusing users.

8

The whole ionic2 tab component is way too limited now. It uses its own nav-stack now as well so if you land on a page with tabs on it you will have serious issues doing a back operation from that page to get back. Not only that, you will struggle to add/make your own back button simply because the framework has no good way of adding your own and make it look as it should on the different platforms due to the way it wraps buttons inside or outside toolbars on the header.

The best way might just to ditch the tabs component alltogether and just do your own buttons and some div’s that you make visible depending on what you pressed. That way your header will show the back button so you can get out of the tabbed page too.

1 Like
9

@mhartington What could we do if we don’t want to use segments for performance reason? I need to use VirtualScroll but it’s not working with segments… So I need double tabs…

1 Like
10

same here, I think a great solution would be to be able to use different ion-content for each segment, the same as for tabs.

11

Can i add custom button into the ion-tab?