How to get tabs below the header part like this using ionic 4

I need Exactly same design for Login and Register page using ionic 4 with angular 8…please give a suggestion to do…i am newbie so help me

Hello,
Ionic tabs have 2 types of slots:

  1. bottom
  2. top

Default slot is bottom if you want to add at the top just do like this:

  <ion-tabs>
    <ion-tab-bar slot="top">
      <ion-tab-button tab="schedule">
        <ion-icon name="calendar"></ion-icon>
        <ion-label>Questions</ion-label>
      </ion-tab-button>
      <ion-tab-button tab="schedule">
        <ion-icon name="calendar"></ion-icon>
        <ion-label>Statastic</ion-label>
      </ion-tab-button>
      <ion-tab-button tab="schedule">
        <ion-icon name="calendar"></ion-icon>
        <ion-label>Settings</ion-label>
      </ion-tab-button>
    </ion-tab-bar>
  </ion-tabs>

For more details ion-tabs

1 Like

thanks lot @gokujy for your reply…:slight_smile: