Ionic tabs with custom button at center


#1

Hi there,
I would like to customize my ionic tabs menu like the one in the image below. I am using ionic2. Any idea how?

custom_tabs


#2

You want to achieve Tab view or the + icon view (as a floating icon) or both ?


#3

I want to achieve a tab view like that, I would prefer not using a floating button on top of a ion-tabs


#4

Refer below link:

You can have
Text Tabs
Icon Tabs
Text and Icon Tabs
Badge Tabs

I hope this will help you.


#5

I have already referred to them, the problem is that I need the icon to be bigger than the Tab View


#6

Hey, I would like to know if you did it? and how?


#7

Did you achieve that? I need acchieve somthing like that too.Plz share if you. Thanks


#8

You can try with something like this

<ion-tabs>
    <ion-tab label="" icon="home" href="/tabs/(home:home)">
        <ion-router-outlet name="home"></ion-router-outlet>
    </ion-tab>
    <ion-tab label="" icon="warning" href="/tabs/(about:about)">
        <ion-router-outlet name="about"></ion-router-outlet>
    </ion-tab>
    <ion-tab></ion-tab>
    <ion-tab label="" icon="pin" href="/tabs/(contact:contact)">
        <ion-router-outlet name="contact"></ion-router-outlet>
    </ion-tab>
    <ion-tab label="" icon="person" href="/tabs/(contact:contact)">
        <ion-router-outlet name="contact"></ion-router-outlet>
    </ion-tab>
</ion-tabs>

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

Keep in mind, this is for Ionic v4

fab%20in%20tabs


#9

Cool, sorry can i ask something? The plus button in the center work just fine, but the rest of the icon tabs doesn’t show…


#10

I did your method but how to navigate that plus button to the page which is belong to tabs page itself?