CODEWITHSUNDEEP
htmlcssionic-frameworksassionic4
Taimoor
Taimoor

Reputation: 81

Ionic 4, Tabs menu with center button hump

I was just wondering that how can we create a button in center of tab menu like: enter image description here

Tried few tests but couldn't get same or similar to this. Is there any help to do this?

Upvotes: 1

Views: 1927

Answers (1)

Rami Assi
Rami Assi

Reputation: 1129

You need to use ion-fab setting the vertical alignment to bottom and the horizontal alignment to center. With some extra css rules you can get exactly the same as the image you show.

<ion-tabs>

  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="tab1">
      <ion-icon name="albums-outline"></ion-icon>
      <ion-label>Albums</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="tab2">
      <ion-icon name="people-outline"></ion-icon>
      <ion-label>Accounts</ion-label>
    </ion-tab-button>

    <ion-tab-button></ion-tab-button>

    <ion-tab-button tab="tab3">
      <ion-icon name="card-outline"></ion-icon>
      <ion-label>Card</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="tab4">
      <ion-icon name="settings-outline"></ion-icon>
      <ion-label>Settings</ion-label>
    </ion-tab-button>
  </ion-tab-bar>

</ion-tabs>
<ion-fab vertical="bottom" horizontal="center" slot="fixed">
  <ion-fab-button>
    <ion-icon name="add-outline"></ion-icon>
  </ion-fab-button>
</ion-fab>

Update

To make it shareable and easier to use, I have created a custom component ion-tab-bar-middle-fab for this purpose. You can find a usage example and more information on this page:

https://www.npmjs.com/package/ion-tab-bar-middle-fab

enter image description here

Upvotes: 0

Related Questions