Problems jumping from root tab to root tab

0
votes

Which is the best way for doing this?

Tabs Screens

I have three options, but I do not like any of them.

Option 1:

  • TabsPage 2: Create “A, B, C” like a “Footer”
  • Disable subpage Tabs in config opcion (take out Tabs “1, 2, 3”)
  • GO: Use “NavBar Push(Screen2)”.
  • BACK: “NavBar pop()”

Problems:

  1. Create tab “A, B, C” with “Footer” instead of “ion-tab”

Option 2:

  • Use “Modal Form” for “screen2”.
  • TabsPage 2:
    • Create “A, B, C” like a “Footer”
    • Create manually “back button”
  • GO: View Modal
  • BACK: Dismiss modal

Problems:

  1. Create tab “A, B, C” with “Footer” instead of “ion-tab”
  2. back button is not automatically generated.

Option 3:

  • Create two “TabsPage” with “ion-tabs” for “1, 2, 3” and for “A, B, C”.
  • GO: this.appCtrl.getRootNav().setRoot(TabsPage2)
  • BACK: this.appCtrl.getRootNav().setRoot(TabsPage1)

Problems:

  1. “TabsPage 1” filter options and position is lost when “BACK”.
1
ionic-frameworktabsion-nav

1 Answers

0
votes

This link drived me to this github repo which has an example with a solutions based on "ion-tab" that works for both "Modals" and "Push" (see the example on a video).

The problem is solved just by adding [tabsHideOnSubPages]="true" on TabsPage1, like this:

<ion-tabs>
    <ion-tab [tabsHideOnSubPages]="true" [root]="homePage" tabIcon="home"></ion-tab>
    <ion-tab [root]="chatPage" tabIcon="chatbubbles"></ion-tab>
    <ion-tab [root]="profilePage" tabIcon="person"></ion-tab>
</ion-tabs>

I have used "push" just because like that the "back" button is generated automatically.

Great! J. Pablo.