[Ionic Tutorial] Beautiful Custom Tabs with Custom Icons

tutorials
20

@jjdev @FlavianoRedressa @Malthe @TomCosta @TaimoorMughal @valdeca

Hi guys sorry it took so long but I was very bussy.
But now I finally had time to convert them to ionic 4 and 5.
They look almost the same:

ionic5tabs
(Note: didnt tested them on devices. ATM only on browser)

Here is the tabspage.html:

<ion-tabs>

  <ion-tab-bar slot="bottom" color="purple">
    <ion-tab-button tab="tab1">
      <ion-icon name="flame"></ion-icon>
    </ion-tab-button>

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

    <ion-tab-button tab="tab3" class="custom-tab">
      <ion-icon name="add"></ion-icon>
    </ion-tab-button>

    <ion-tab-button tab="tab4">
      <ion-icon  name="notifications"></ion-icon>
      <ion-badge>9</ion-badge>
    </ion-tab-button>

    <ion-tab-button tab="tab5" class="custom-profile">
      <ion-icon></ion-icon>
    </ion-tab-button>
  </ion-tab-bar>

</ion-tabs>

Here is the tabs.page.ts snippet you need for an element in the shadow dom:

ionViewDidEnter() {
    document.querySelector('#tab-button-tab3').shadowRoot.querySelector('.button-native').setAttribute('style', 'margin-top: -2px');
}

And here is the tabs.page.scss file:


ion-tabs{
    background: #121212;
}

ion-tab-bar  {
    background: #121212;
    width: 90% !important;
    max-width: 400px !important;
    border-radius: 30px;
    margin: 5px 0px 5px 5% !important;
    max-height: 56px;
    height: 95px;
    max-height: 95px;
    border: unset;
}

.tab-selected ion-icon{
    color: white;
    padding-bottom: 9px;
}

.tab-selected, ion-tab-button{
    background: #2c2c2c;
}

#tab-button-tab1,
#tab-button-tab2,
#tab-button-tab3,
#tab-button-tab4,
#tab-button-tab5 {
    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);
    --border: none;
    max-height: 56px;
    margin-top: 39px;
}

ion-tab-button:hover {
    ion-icon, ion-label {
        color: white !important;
        --ion-color-base: white !important;
    }
}

ion-tabs {
    //not selected custom image
    ion-tab-button.custom-profile > ion-icon {
        background-image: url(https://blog.photofeeler.com/wp-content/uploads/2017/09/instagram-profile-picture-maker.jpg);
    }

    //selected custom image
    ion-tab-button.tab-selected.custom-profile > ion-icon {
        background-image: url(https://blog.photofeeler.com/wp-content/uploads/2017/09/instagram-profile-picture-maker.jpg);
    }
}

#tab-button-tab1 {
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
}

#tab-button-tab2 {
  border-top-right-radius: 15px;
}

#tab-button-tab4 {
  border-top-left-radius: 15px;
}

#tab-button-tab3 {
    overflow: visible !important;
    max-height: 120px !important;
    height: 120px !important;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;

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

#tab-button-tab3::part(a) {
    --margin-top: -2px !important;
}
#tab-button-tab3 > a {
    --margin-top: -2px !important;
}

#tab-button-tab5 {
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;

    ion-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;
        }
    }
}

#tab-button-tab5.tab-selected ion-icon{
    padding-bottom: 0px;
}

ion-badge {
    --background: purple;
    --color: white;
    width: 23px;
    height: 21px;
    font-size: 0.8rem;
    margin-top: -8px;
    padding-top: 5px;
}

#tab-button-tab1 > ion-icon:after,
#tab-button-tab2 > ion-icon:after,
#tab-button-tab4 > ion-icon: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;
    border-radius: 5px;
}

#tab-button-tab1.tab-selected > ion-icon:after,
#tab-button-tab2.tab-selected > ion-icon:after,
#tab-button-tab4.tab-selected > ion-icon:after {
    width: 24px;
    background: purple;
}

Hope you like it! I also extended my GitHub Repo of the tabs with the new ones. Please Hit a Star if you like it and if you have some nice changes fee free to commit to my repo :slight_smile: Cheers :beers:

7 Likes