Tabs for v4

#1

Hey there,

i want to make a design like that.

image

but i cant the put the LOGO on the center like on the pic. and i cant put tabs in ionic 4. can you please help me about that?

THX .

#2

if you start with the tabs template, modify the ion-tabs and add a FAB for the center button as follows:

<ion-tabs>
    <ion-tab-bar slot="bottom" color="primary">
      <ion-tab-button tab="tab1">
        <ion-icon name="perosn"></ion-icon>
        <ion-label>Profile</ion-label>
      </ion-tab-button>

      <!-- Placeholder tab for custom center FAB -->
      <ion-tab-button>
      </ion-tab-button>

      <ion-tab-button tab="tab2">
        <ion-icon name="more"></ion-icon>
        <ion-label>Lorem</ion-label>
      </ion-tab-button>      
    </ion-tab-bar>
  </ion-tabs>

<ion-fab horizontal="center" vertical="bottom" edge>
    <ion-fab-button>
      <ion-icon color="primary" name="aperture"></ion-icon>
    </ion-fab-button> 
  </ion-fab>

Then add some styling to the tabs.scss file:

ion-fab {
    bottom: 28px;

    ion-fab-button {
        --box-shadow: none;
    }
}

Hope this is helpful!

#3

no not working. tabs are so difficult in ionic 4.

#4

thats weird. is your package.json up to date? what exactly isnt working?
here is what i was able to achieve with the code i posted, you would just have to change the icon in the FAB to your custom icon:
Screenshot%20from%202019-02-07%2008-04-26

#5

thx for interest. i have solved. thank you again.