Hello Guys.
Today I wanna show you my new created custom Tabs for Ionic and how to recreate and modify them.
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 
PS: For all the lazy people out there here is the github link to find the files ready to copy paste them 
