Hello i tried alot so i must post this tutorial so future Projects doesnt need as much research as my project did.
Today ill show you how to create tabs like this:
One more thing before i start:
If you need my TabImages i have my GitHub Project for you linked on the bottom!
And one tip before i start:
If you want to use your own icons the please create images with 48x48 cause we will resize them anyway but its important for a better resolution.
Ok now lets start:
First go to your Main.html where your Activity starts or where you want to show the tabs.
In the ion content write this:
<ion-content padding>
<ion-tabs color="androidprimary" [selectedIndex]="1">
<ion-tab [root]="tab2Root" tabIcon="categories"></ion-tab>
<ion-tab [root]="tab1Root" tabIcon="home"></ion-tab>
<ion-tab [root]="tab3Root" tabIcon="hot"></ion-tab>
</ion-tabs>
</ion-content>
If you wonder what color i use its this in my variables.scss:
$colors: (
primary: #387ef5,
secondary: #32db64,
danger: #f53d3d,
light: #f4f4f4,
dark: #222,
white: #fff,
subtext: #e0e0e0,
androidprimary: #141414,
androidprimarydark: #0a0a0a
);
Ok so for now we got the tabs with the names: categories, home and hot.
Well now lets modify the Main.ts file of this html file so we can change sites with clicks on the tabs.
Write something like that:
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Platform } from 'ionic-angular';
import { Explore } from '../Explore/Explore';
import { Hot } from '../Hot/Hot';
import { Categories } from '../Categories/Categories';
@Component({
selector: 'page-MainActivity',
templateUrl: 'MainActivity.html'
})
export class MainActivity
{
tab1Root: any = Explore;
tab2Root: any = Hot;
tab3Root: any = Categories;
constructor(public navCtrl: NavController)
{
}
}
Notice that i have imported the sites on top of the ts file! Dont forgett it!
Change the directions to the folder and site names you have.
So now the thabs have ther specified pages so lets move on.
Now the importand step. Lets create the images for the tabs.
Import your images for the tabs in YourApp/src/assets/img/ .
Good now we need to modify the Main.scss for (to show the images in android, ios and browser).
Notice that ios stands for iOS Devices, md stands for your Browser and wp stands for your Android Devices in the scss.
.tabbar, .tabs-ios, .tabs-md , .tabs-wp{
.tab-button-icon {
background-repeat:no-repeat;
background-position:center;
height:24px;
width:24px;
background-size:contain;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
&:before {
display:none;
}
}
}
.tabs-ios {
a[aria-selected=false]{
.tab-button-icon[ng-reflect-name=categories], .tab-button-icon[aria-label="categories"] {
background-image: url(../assets/img/categories_inactive.png);
}
.tab-button-icon[ng-reflect-name=home], .tab-button-icon[aria-label=home] {
background-image: url(../assets/img/explore_inactive.png);
}
.tab-button-icon[ng-reflect-name=hot], .tab-button-icon[aria-label=hot] {
background-image: url(../assets/img/hot_inactive.png);
}
}
a[aria-selected=true] {
//fĂĽhr eventuellen text
//span {
//color: #f00; //whatever colour you want to use for the text
//}
.tab-button-icon[ng-reflect-name=categories], .tab-button-icon[aria-label=categories] {
background-image: url(../assets/img/categories_active.png);
}
.tab-button-icon[ng-reflect-name=home], .tab-button-icon[aria-label=home] {
background-image: url(../assets/img/explore_active.png);
}
.tab-button-icon[ng-reflect-name=hot], .tab-button-icon[aria-label=hot] {
background-image: url(../assets/img/hot_active.png);
}
}
}
.tabs-md {
a[aria-selected=false]{
.tab-button-icon[ng-reflect-name=categories], .tab-button-icon[aria-label="categories"] {
background-image: url(../assets/img/categories_inactive.png);
}
.tab-button-icon[ng-reflect-name=home], .tab-button-icon[aria-label=home] {
background-image: url(../assets/img/explore_inactive.png);
}
.tab-button-icon[ng-reflect-name=hot], .tab-button-icon[aria-label=hot] {
background-image: url(../assets/img/hot_inactive.png);
}
}
a[aria-selected=true] {
//fĂĽhr eventuellen text
//span {
//color: #f00; //whatever colour you want to use for the text
//}
.tab-button-icon[ng-reflect-name=categories], .tab-button-icon[aria-label=categories] {
background-image: url(../assets/img/categories_active.png);
}
.tab-button-icon[ng-reflect-name=home], .tab-button-icon[aria-label=home] {
background-image: url(../assets/img/explore_active.png);
}
.tab-button-icon[ng-reflect-name=hot], .tab-button-icon[aria-label=hot] {
background-image: url(../assets/img/hot_active.png);
}
}
}
.tabs-wp {
a[aria-selected=false]{
.tab-button-icon[ng-reflect-name=categories], .tab-button-icon[aria-label="categories"] {
background-image: url(../assets/img/categories_inactive.png);
}
.tab-button-icon[ng-reflect-name=home], .tab-button-icon[aria-label=home] {
background-image: url(../assets/img/explore_inactive.png);
}
.tab-button-icon[ng-reflect-name=hot], .tab-button-icon[aria-label=hot] {
background-image: url(../assets/img/hot_inactive.png);
}
}
a[aria-selected=true] {
//fĂĽhr eventuellen text
//span {
//color: #f00; //whatever colour you want to use for the text
//}
.tab-button-icon[ng-reflect-name=categories], .tab-button-icon[aria-label=categories] {
background-image: url(../assets/img/categories_active.png);
}
.tab-button-icon[ng-reflect-name=home], .tab-button-icon[aria-label=home] {
background-image: url(../assets/img/explore_active.png);
}
.tab-button-icon[ng-reflect-name=hot], .tab-button-icon[aria-label=hot] {
background-image: url(../assets/img/hot_active.png);
}
}
}
Hell yeah now you have the exactly same tabs as i have.
Solution if your images only shows on Browser but not on Device:
Many people face that problem and im 99% of them its because the path of the images is wrong.
If you have your images in src/assets/img/ then this is the right path:
background-image: url(../assets/img/hot_active.png);
If not try to change it until you see your images on your device.
GitHub Project where you can find the Images and the Main files:
https://github.com/lukasrein97/Ionic2TabsWithCustomIcons
Cheers!
