How to add a button in middle of tab bar?

ionic-v1
1

Hello! I am new to ionic development. I started with the base tabs app and have 4 tabs. I’m trying to figure out how I can add a button to the tab bar and position it in the middle. if I just add a <button> inside <ion-tabs> it shows up nicely but always aligns left no matter what I try.

POT009lGILGpKtAZGHkidTeFS0ImEo.png868×1746

2

Why are you using a button instead of the ion-tab directive with the icon you want?

<ion-tabs>
  <ion-tab></ion-tab>
  <ion-tab></ion-tab>
  <ion-tab icon="ion-plus-circled">
    <ion-nav-view></ion-nav-view>
  </ion-tab>
  <ion-tab></ion-tab>
  <ion-tab></ion-tab>
</ion-tabs>
3

Well… I think I decided to do that because if I just put another <ion-tab> there it tries to navigate somewhere when clicked… the purpose of this button will be to display what I think will be a modal to choose from a few options… so I don’t want to navigate away from whatever tab I’m currently on when initially clicked… does that make sense? An example of this is how the app Path works.

4

Well… use an ion-tab directive with ng-click="openModal()" instead of using ui-sref or href.

1 Like
5

Thanks, that definitely does the trick!

6

Hi, I am trying to do something similar. But when I set the class of ion-tabs to be `tabs-icon-top’ (I need other tabs to show their labels), the center button seems to have some extra padding below. Do you know how to figure that?

7

I have the same problem. Any help?