Hi everyone :slight_smile: TLDR: How do you implement two pages each with with one <ion-tabs> (each containing at least two <ion-tab>s)? The tab names and icons change, the tabs content changes only after clicking on it. I have a problem for which I struggled to find a solution for. I saw other pe…

Sorry I need a little bit time to extract the relvant code. [image] Jacktoolsnet/01_TabsPage 01_TabsPage - Ionic 3 Tabs over Tabs example

A slightly different approach, but much cleaner imo. [image] judgewest2000/IonicSegmentExample IonicSegmentExample - An example of using segments to change content

BTW kudos on a good question including a git repo example etc…

Hi @judgewest2000 . Thank you for your answer! Yeah the approach using segments is my emergency solution, but It would be awesome to get it working using actual tabs (amongst other things, because of icons + words = better UX) :slight_smile:

I havn’t any problems with pushing a tab page on top of on other one. Even showing a tab page as modal on top is no problem. But I do nothing special. try to add [tabsHideOnSubPages] = “true” to your <ion-tab> tag It’s the only difference I can find at the moment.

Thank you for your answer @Jacktoolsnet ! So I included it on all the ion-tabs like this: <ion-tab [tabsHideOnSubPages]=true [root]="tab3Root" tabTitle="NotAbout" tabIcon="home"></ion-tab> This unfortunately leads to the same observed behaviour / bug for me. If you got it working, could you uplo…

It’s possible that the proper format is tabsHideOnSubPages=“true” Sans brackets. No idea if this could help with your overall problem but I’ve used that property before and believe I wrote it out in that form with success

Hi @jaydz thank you for you answer! No unfortunately the observed behaviour stays the same.

[image] Jacktoolsnet: Jacktoolsnet/01_TabsPage Hmm yourse seems to be working, but I haven’t spotted the differences yet. Thanks for posting though!

Tho only difference is in the ion-tab tag in the html-pages.

I’ll just accept yours as the answer :slight_smile: My team used the segments approach now tho. But I guess future people can look at your code and use that :slight_smile: GG thank you for your help

99% can't solve this!? Creating two tab pages in Ionic (ion-tabs)

Ionic Framework ionic-v3

Jacktoolsnet January 17, 2018, 7:37pm 9

Sorry I need a little bit time to extract the relvant code.

4 Likes

Push from ion-tabs to ion-tabs

Topic		Replies	Views
Ion-tabs just for one page? ionic-v3	11	7396	July 19, 2021
Problem with two tab pages ionic-v3	1	341	July 19, 2021
How to switch between two "ion-tabs pages" ionic-v3	5	1353	February 12, 2018
Demonstrating a bug in Ionic 3 with navigation between pages with ion-tabs elements ionic-v3	2	539	October 17, 2017
Content projection? Possible to have two views in one page? ionic-v3	6	1600	December 20, 2016

99% can't solve this!? Creating two tab pages in Ionic (ion-tabs)

Related topics