<ion-tabs> inside Modal

Ionic Framework ionic-v3
1

So… i want to add two simple tabs inside modal, this is possible right now in ionic 2? i really don’t know how to approach this, i tried some things without result.

Ofcourse i can do something similar with two buttons for tabs and using [hide] for content, but well… maybe there is a better way to do this.

Thanks.

2

This is pretty rough, but this should help get you in the right direction.

3

Thank you so much man! i tried something similar but didn’t work, now works perfect!

One more question, i had some problems to add a close button becouse of tabs i am in another page than the modal itself, so this.viewCtrl.dismiss(); don’t work in a tab page, becouse i need to close the modal, not the tab page.

What i did is add the button at the root page of the modal and move to the navbar with position absolute and z-index, like this:

<button clear small (click)="close()" style="position: absolute; top: 9px; right: 7px; z-index: 999; color: white;">
  <ion-icon name="close"></ion-icon>
</button>

<ion-tabs primary>
        <ion-tab tabIcon="contacts"  [root]="page1"></ion-tab>
        <ion-tab tabIcon="contact"  [root]="page2"></ion-tab>
</ion-tabs>

Is there a better way to do that?

here is the result:

image
button close.png351×577 21.3 KB

4

Is there any Example with ionic 1?

5

A late reply on old topic but I just get into the same issue as you.
And had this solution.

  1. From rootTab u can share the viewCtrl.dismiss() as a param to other tab.
constructor(private viewCtrl: ViewController) {
this.rootParams.dismiss = (data) => {
      if (data)
        this.viewCtrl.dismiss(data);
      else this.viewCtrl.dismiss();
    };
};

In your tabs html:
[rootParams]="rootParams"
2. From tab page just call:
this.navParams.data.dismiss();

6

A later reply :slight_smile: but I just get in the same issue right now.

In my case your soulution dosent work. I changed it a little bit and send the viewCtrl complete as param to the tab page.

tabs.ts

this.data = {
      chatroom: this.navParams.get('chatroom'),
      viewCtrl: this.viewCtrl
    }

tabs.html

<ion-tab [tabsHideOnSubPages]="true" [root]="tab1Root" [rootParams]="data" tabTitle="Allgemein" tabIcon="settings">

Sub-Tab page.ts

constructor(
    public navCtrl: NavController,
    public navParams: NavParams,
    public viewCtrl: ViewController
  ) {
    this.chatroom = this.navParams.get('chatroom');
    this.viewCtrl = this.navParams.get('viewCtrl');
    console.log('INPUT', this.chatroom);
  }

  public onClickCancel() {
    this.viewCtrl.dismiss();
  }

Sub-Tab page.html

<ion-navbar color="primary">
    <ion-buttons left>
      <button ion-button icon-only (click)="onClickCancel()">
        <ion-icon name="arrow-back"></ion-icon>
      </button>
    </ion-buttons>
    <ion-title>Chatraum - Einstellungen</ion-title>
  </ion-navbar>

grafik
grafik.jpg1649×1747 308 KB