IONIC 6 FLOATING TAB BUTTON TUTORIALS

In this tutorial, we will build an application that have custom interface of tab navigation using Ionic Angular framework. This tab design is currently famous and always be use in the development of mobile applications.

HOW TO BUILD THE FLOATING TAB BUTTON IN IONIC

• Step 1 : Create new Ionic Project
• Step 2 : Customize the floating tab button

CREATE NEW IONIC PROJECT

Let us full fill the first requirement that is to install the latest version of Ionic CLI.

npm install -g @ionic/cli

Use command to create the Ionic Angular app but with the tabs template:

ionic start tab-float-example tabs --type=angular 

Get into the app directory:

cd tab-float-example

As we can see, we already have a starting project with a simple tabbed interface.

Tips : To run the project just run this command below:

ionic serve

CUSTOMIZE THE FLOATING TAB BUTTON

A floating tab button usually place at the center of the tab navigation. To make this happen we will adjust the style of the tabs navigation and the buttons too.

Go to src/app/tabs/tabs.page.scss and write the style below :

#tab-button-tab2 {
    ion-icon {
        padding: 10px !important;
        border-radius: 50% !important;
        width: 40px;
        height: 40px;
        margin-top: -30px;
        border: unset;
        background: rgb(237, 73, 73); //button color
        box-shadow: 0 0 10px rgb(83, 83, 83); //button shadow
    }
}

.tab-selected,
ion-tab-button {
    background: transparent;
}

ion-tab-bar {
    background: transparent;
    overflow: visible;
    border: unset;
    height: 120px;
}

#tab-button-tab2 ion-icon {
    color: white;
}

Then, go to src/app/tabs/tabs.page.html to remove the button name and change the button icon. For this example, we will use add icon. You can use any icon that available Ion Icon site.

Change the code to this :

<ion-tabs>
    <ion-tab-bar slot="bottom">
        <ion-tab-button tab="tab1">
            <ion-icon name="triangle"></ion-icon>
            <ion-label>Tab 1</ion-label>
        </ion-tab-button>

        <ion-tab-button tab="tab2">
            <ion-icon name="add-outline"></ion-icon>
        </ion-tab-button>

        <ion-tab-button tab="tab3">
            <ion-icon name="square"></ion-icon>
            <ion-label>Tab 3</ion-label>
        </ion-tab-button>
    </ion-tab-bar>
</ion-tabs>

There you go, now you have the floating tab button at the tab bar and using add icon.

Want to see the coding process live. Here is the live example :

Or see the project source code on GitHub.