Search code examples
ionic-frameworkionic3ionic4ionic-native

ion-item and content is put above ion-tab

how can I put the ion-tabs on top of all the displayed content. 


<ion-content>
/* ion-item*/
</ion-content>
<ion-tabs>
/*ion-tab*/
</ion-tabs>

enter image description here

Solution

  • You shouldn't create your page inside the tabs file as your are doing now. You should create a separate component with your content, and then use your tabs you navigate to these components(Views). Here is an example of some code I wrote for a previous application I created:

    <ion-tabs #tabs>
  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="tab1">
      <ion-icon name="home-outline"></ion-icon>
    </ion-tab-button>

    <ion-tab-button tab="tab2" (click)="openModal()">
      <ion-icon name="add-circle-outline"></ion-icon>
    </ion-tab-button>

    <ion-tab-button tab="tab3" [disabled]="!isAutenticated">
      <ion-icon name="notifications-outline"></ion-icon>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

    As seen on the example each ion-tab-button references to a specific tab, these tabs will contain your content.

    Hope that gave you some clarity.