Can we nest ion-tabs inside a component?

Is it possible to embed an ion-tabs component inside another component?

What I want is something like this ionic2 nested tabs example: http://codepen.io/Glitchbone/pen/GEcae

I can’t determine how to do this in ionic2 though. Whenever I try to put an ion-tabs component inside the content of another component (either directly or using ion-content), the ion-tabs element is sized to take up the entire browser area and ends up behind the parent component.

Is nesting navigation components just not supported yet in Ionic 2?

I spent several days trying to do this and from what I can tell it is not possible.

If anyone knows otherwise please let me know.

that is call segment not tab

A segment button doesn’t provide a nav controller and page stack and switching though.

It looks like the styling for ion-tabs assumes that it will only be used fullscreen and doesn’t provide the overrides to allow it to be nested inside any other components. I think it should be possible if the style sheet was updated to allow it.

I implemented my prototype layout using segments originally since at one point you couldn’t have two ion-tabs elements on the same page, but I think that recently changed. (I can’t remember where I read that.) I don’t have a working solution yet.

I had created a segment bar that had a MORE button on the end and did all of the resizing like the examples on the Material Design guidelines. But of course, segments are really supposed to be filters for data on the current page and not navigation to other pages, so I am going to work on switching over to tabs.

Did you get this working? I am looking into adding tabs inside of a page that is navigated to using the root set of tabs. I’d love to hear if you got it up and running! Otherwise I’ll be looking at segments instead as well.

I tried to switch back to using tabs inside of tabs, but it just wouldn’t work. It doesn’t look like Ionic navigation is compatible with multiple levels of tabs.

So, if you are totally set on using sub-tabs like I am, it looks like the best option is to either use segment buttons for sub-tabs or roll your own tab component. I went back to segment buttons and use them to replace the current tab’s root page. Works pretty well.

My next dilemma is going to be that some of my sub-tab pages really kinda need filtering segments. :rolling_eyes:

Thanks for the tip! Yeah I was hesitating to use segment buttons because of the lack of navigation features, but I’ll give that a try.

Since my sub-tabs all use the same parent information (NavParams), this is all I do:

	public selectPage(event: any) {
		if (event !== null)
			this.navCtrl.setRoot(event.value, this.params);
	}

navCtrl and params come from the constructor:

	constructor(
		...
		public navCtrl: NavController, 
		public params: NavParams,
		...) { ... }

And I set the value of each segment button to the string name of the page component it points to.

Screenshots of my app prototype in desktop and iPhone layouts, showing the segments with More button on desktop and scrolling segments on phone:

2 Likes