[Ionic Tutorial] Beautiful Custom Tabs with Custom Icons

Hello Guys.
Today I wanna show you my new created custom Tabs for Ionic and how to recreate and modify them.

com-video-to-gif

Its very simple first copy this into your tabs.html like you normally would do.
Nothing special here:

<ion-tabs>
  <ion-tab tabIcon="md-flame" [root]="tab1"></ion-tab>
  <ion-tab tabIcon="md-search" [root]="tab2"></ion-tab>
  <ion-tab tabIcon="md-add" [root]="tab3" class="custom-tab"></ion-tab>
  <ion-tab tabIcon="md-notifications-outline" [root]="tab4" tabBadge="3"></ion-tab>
  <ion-tab tabIcon="custom-profile" [root]="tab5"></ion-tab>
</ion-tabs>

As you can see Tab 1 and Tab 2 are just normal Ionic Tabs. Tab 3 is the custom-tab. and Tab 5 is a normal Ionic Tab but with a custom tab icon like a profile picture for example.

Now comes the interesting part. The CSS. Because I needed to modify alot so this tabs behave the same on ios, android and web.

Now paste this into your tabs.css file:

page-tabs {
    .tabs .tabbar {
        background: #121212;
        width: 90% !important;
        max-width: 400px !important;
        border-radius: 30px;
        margin: 0px 0px 20px 5% !important;
        max-height: 56px;
        height: 56px;
    }

    .tabs .tab-button[aria-selected="true"] .tab-button-icon {
      color: white;
      -webkit-transform: translate3d(0, -5px, 0);
      transform: translate3d(0, -5px, 0);
    }

    .tabs .tab-button-icon {
        color: #f2f2f2;
        padding-bottom: 3px;
    }

    .tabs-md, .tabs-wp {
        a[aria-selected=false]{
            .tab-button-icon[ng-reflect-name=custom-profile], .tab-button-icon[aria-label=custom-profile] {
                background-image: url(../assets/imgs/profilepicture.jpg);
            }
        }

        a[aria-selected=true] {
            .tab-button-icon[ng-reflect-name=custom-profile], .tab-button-icon[aria-label=custom-profile] {
                background-image: url(../assets/imgs/profilepicture.jpg);
            }
        }
    }

    .tabs-ios {
        a[aria-selected=false]{
            .tab-button-icon[ng-reflect-name=custom-profile], .tab-button-icon[aria-label="custom-profile outline"] {
                background-image: url(../assets/imgs/profilepicture.jpg);
            }
        }

        a[aria-selected=true] {
            .tab-button-icon[ng-reflect-name=custom-profile], .tab-button-icon[aria-label=custom-profile] {
                background-image: url(../assets/imgs/profilepicture.jpg);
            }
        }
    }

    #tab-t0-0:after,
    #tab-t0-1:after,
    #tab-t0-3:after,
    #tab-t0-4:after {
      background: none repeat scroll 0 0 transparent;
      bottom: 0;
      content: "";
      display: block;
      height: 7px;
      position: absolute;
      transition: width 0.4s ease 0s, background-color .4s ease;
      width: 0;
      margin-bottom: 12px;
      border-radius: 5px;
    }

    #tab-t0-0[aria-selected=true]:after,
    #tab-t0-1[aria-selected=true]:after,
    #tab-t0-3[aria-selected=true]:after,
    #tab-t0-4[aria-selected=true]:after {
      width: 24px;
      background: purple;
    }

    #tab-t0-0,
    #tab-t0-1,
    #tab-t0-2,
    #tab-t0-3,
    #tab-t0-4 {
        background: #23272a;
        -webkit-box-shadow: 5px 5px 15px -15px  rgba(0,0,0,0.4);
        -moz-box-shadow: 5px 5px 15px -15px  rgba(0,0,0,0.4);
        box-shadow: 5px 5px 15px -15px  rgba(0,0,0,0.4);
    }

    #tab-t0-0 {
        border-top-left-radius: 30px;
        border-bottom-left-radius: 30px;
    }

    #tab-t0-1 {
      border-top-right-radius: 15px;
    }

    #tab-t0-3 {
      border-top-left-radius: 15px;
    }

    #tab-t0-2 {
        overflow: visible !important;

        ion-icon {
            -webkit-transform: translate3d(0, 0px, 0);
            transform: translate3d(0, 0px, 0);
            background: purple;
            padding: 16px !important;
            border-radius: 50% !important;
            width: 60px !important;
            height: 60px !important;
            margin-top: -50px !important;
            box-shadow: 0 0 0 11px #121212;
        }
    }

    #tab-t0-4 {
        border-top-right-radius: 30px;
        border-bottom-right-radius: 30px;

        .tab-button-icon {
            background-repeat:no-repeat;
            background-position:center;
            height:24px;
            width:24px;
            background-size:contain;
            border-radius: 50%;
            -webkit-background-size: contain;
            -moz-background-size: contain;
            -o-background-size: contain;
            &:before {
                display:none;
            }
        }
    }

    .badge {
        background-color: purple;
    }

    .footer::before, .tabs[tabsPlacement="bottom"] > .tabbar::before {
        height: 0px !important;
    }

    .ion-md-add::before {
      content: "\f273";
      margin-top: 1px;
    }
}

Nice now you got the exacte same tabs as I showed above.


How to modify the tabs now?

Here are some tips you need to know if you want to modify them.
This snippet here is needed to create custom tab icons. Ios is seperated from the others because you need to add “outline” to the css ng-reflectname. With this sippet you can specify your icon name and image for either active or inactive tab.

    .tabs-md, .tabs-wp {
        a[aria-selected=false]{
            .tab-button-icon[ng-reflect-name=custom-profile], .tab-button-icon[aria-label=custom-profile] {
                background-image: url(../assets/imgs/profilepicture.jpg);
            }
        }

        a[aria-selected=true] {
            .tab-button-icon[ng-reflect-name=custom-profile], .tab-button-icon[aria-label=custom-profile] {
                background-image: url(../assets/imgs/profilepicture.jpg);
            }
        }
    }

    .tabs-ios {
        a[aria-selected=false]{
            .tab-button-icon[ng-reflect-name=custom-profile], .tab-button-icon[aria-label="custom-profile outline"] {
                background-image: url(../assets/imgs/profilepicture.jpg);
            }
        }

        a[aria-selected=true] {
            .tab-button-icon[ng-reflect-name=custom-profile], .tab-button-icon[aria-label=custom-profile] {
                background-image: url(../assets/imgs/profilepicture.jpg);
            }
        }
    }

Good now with this snipped you add the underline Animation for you specified Tabs. You may wonder where those #tab-t0-x css tags came from. These are from Ionic itself once your tabs get rendered in your browser. With those you can change every tab button individually.

    #tab-t0-0:after,
    #tab-t0-1:after,
    #tab-t0-3:after,
    #tab-t0-4:after {
      background: none repeat scroll 0 0 transparent;
      bottom: 0;
      content: "";
      display: block;
      height: 7px;
      position: absolute;
      transition: width 0.4s ease 0s, background-color .4s ease;
      width: 0;
      margin-bottom: 12px;
      border-radius: 5px;
    }

    #tab-t0-0[aria-selected=true]:after,
    #tab-t0-1[aria-selected=true]:after,
    #tab-t0-3[aria-selected=true]:after,
    #tab-t0-4[aria-selected=true]:after {
      width: 24px;
      background: purple;
    }

This code snippet is just to add those round corners on your tabs:

 #tab-t0-0 {
        border-top-left-radius: 30px;
        border-bottom-left-radius: 30px;
    }

    #tab-t0-1 {
      border-top-right-radius: 15px;
    }

    #tab-t0-3 {
      border-top-left-radius: 15px;
    }

This Code snippet is importand for your round circle button in the middle. Remember to change the Box shadow here to the same color as your Main Scroll Content of you page so you can create the illusion of a “cut out button”:

    #tab-t0-2 {
        overflow: visible !important;

        ion-icon {
            -webkit-transform: translate3d(0, 0px, 0);
            transform: translate3d(0, 0px, 0);
            background: purple;
            padding: 16px !important;
            border-radius: 50% !important;
            width: 60px !important;
            height: 60px !important;
            margin-top: -50px !important;
            box-shadow: 0 0 0 11px #121212;
        }
    }

And this is the last Important css here. With this css you can change the height and width and shape of your new custom tab icon. In my case its the last tab thats why i added the border radius.

   #tab-t0-4 {
        border-top-right-radius: 30px;
        border-bottom-right-radius: 30px;

        .tab-button-icon {
            background-repeat:no-repeat;
            background-position:center;
            height:24px;
            width:24px;
            background-size:contain;
            border-radius: 50%;
            -webkit-background-size: contain;
            -moz-background-size: contain;
            -o-background-size: contain;
            &:before {
                display:none;
            }
        }
    }

I hope you guys like my custom tabs and have fun with them. Cheers :slight_smile:

PS: For all the lazy people out there here is the github link to find the files ready to copy paste them :smiley:

11 Likes

awesome work, thnx for the custom tabs I was looking for something like this

1 Like

Hi no problem man! Glad you like it :slight_smile:

1 Like

It’s really nice… Good job…

1 Like

Thanks! although this doesn’t seem to work on ionic4 since ion-tab is not used anymore, have you give it a thought to adapt it to ionic 4?

3 Likes

I will look into this to create a Ionic 4 version of it. If someone is faster, feel free to create a pull request into my repo :slight_smile:

2 Likes

Hi @reinerluke97!
Congratulations for the job! :smiley: :clap:t5: :clap:t5: :clap:t5:
I would like to convert it to the Ionic 4.x version.
Let me see, if I have time soon.

4 Likes

Great work… :clap: @reinerluke97

1 Like

Hi, this would be great! I would love to see that :slight_smile:

2 Likes

Excellent Work. :+1: :+1: :clap: :clap:

1 Like

Hi, did you tried to convert it to ionic 4.x yet? I was also trying but transition isn’t working as expected.

Don’t have it called Ionic 3/4 - it’s only for Ionic 3?..

It’s not working on Ionic 4.x, it’s fair enough that you might make a version for ionic 4.
But don’t advertise it, if you haven’t made it. :smirk: :joy:

OMG! Sorry, I forgot it…
I get involved in so many projects, that I couldn’t remind me of this one.
I return back soon. Just give me a little bit more time. :smiley:

I’m look forward to that bro :heart_eyes:
Sorry for tripping also :smiley:

1 Like

if you are refering to my github description: I have 3/4 in it because I have planned to add Ionic 4 Components in this repository too. Sorry if it was confusing. But yes I have planned to convert it to Ionic 4 and maybe someone here is faster then me :smiley: