How to display a modal from <ion-tabs>?

Ionic Framework ionic-v3
1

I can’t find a way to make of the the buttons of the page open a modal instead of a page. I know tabs are not made for that, but I want to have the normal behavior for tabs for 4 buttons, and make the one on the center open a modal (like instagram). Not sure how to accomplish this, im seriously considering creating a FAB on top of center button.

2

hi franco, you have some code to share? A modal is a type of page. However implemented differently. Check the modal docs.

3

Hi Fred,

I have no problem displaying the modal, what I want to do is use a (click) property inside instead of having another tab.

Right now this is my workaround:

  <ion-tabs>
      <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
      <ion-tab [root]="tab2Root" tabTitle="Search" tabIcon="search"></ion-tab>
      <ion-tab [root]="tab3Root" tabIcon="add-circle"></ion-tab>
      <ion-tab [root]="tab4Root" tabTitle="Activity" tabIcon="flash"></ion-tab>
      <ion-tab [root]="tab5Root" tabTitle="Profile" tabIcon="person"></ion-tab>
    </ion-tabs>
<ion-fab center bottom>
  <button ion-fab color="danger" 
    (click)="showCreateEvent()">
    <ion-icon name="add"></ion-icon>
  </button>
</ion-fab>

It looks like this, but I don’t like having a button hiding another one…

image

1 Like
4

Hey @franco_valencia do you find any alternative solution?

5

This seems like abuse of tabs. I would suggest trying segments.

6

I have mine just like yours except I have the center tab disabled without an icon or text, so it looks and works just fine.

7

If you really want to do something like that, why don’t you create modal from within your tabs main component? Attach (ionSelect)=“openModal()” to the tab you want to trigger the modal from and call openModal from within your main tabs.

8

Hi sveen, yes I did, I ended up doing this:

<ion-tabs #menu>
  <ion-tab [root]="tab1Root" tabTitle="{{ 'TABS.HOME' | translate }}" tabIcon="home"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="{{ 'TABS.SEARCH' | translate }}" tabIcon="search"></ion-tab>
  <ion-tab (ionSelect)="showCreateEvent()" tabIcon="add-circle"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="{{ 'TABS.ACTIVITY' | translate }}" tabIcon="flash"></ion-tab>
  <ion-tab [root]="tab4Root" tabTitle="{{ 'TABS.PROFILE' | translate }}" tabIcon="person"></ion-tab>
</ion-tabs>
3 Likes
9

Ok :grin:

Can you show me your function which open your modal? Thanks

10

Sure:

public showCreateEvent() {
this.navCtrl.push(CreateEventPage);
}

1 Like