HBK
1
Hİ,
Im using tab on my project and project work on android & ios
I want to customize tabs affected globally on my project. I tried Sass Variables on document but did not look right…
How can i customize tabs look like this. ?
<ion-tabs>
<ion-tab [root]="tab1Root" [tabTitle]="tab1Title" tabIcon="home"></ion-tab>
<ion-tab [root]="tab2Root" [tabTitle]="tab2Title" tabIcon="search"></ion-tab>
<ion-tab [root]="tab3Root" [tabTitle]="tab3Title" tabIcon="cog"></ion-tab>
</ion-tabs>
HBK
2
I solve this problem
variable.scss
$tabs-md-tab-min-height: 60px;
$tabs-md-tab-icon-size: 2.4em;
.tabs-md .tab-button[aria-selected=true] .icon {
color: rgb(255, 255, 255) !important; /*your text color */
background: #FF8800 !important; /* your background color*/
// font-size: 40px;
}
.tabs-md .tab-button[aria-selected=false] .icon {
color: #FF8800 !important; /* your background color*/
background: #ffffff !important; /* your background coor*/
// font-size: 40px;
}
.tabs-md .tab-button[aria-selected=false] {
color: #FF8800 !important; /* your background color*/
// font-size: 40px;
// background: #ffffff !important; /* your background color*/
}
.tabs-md .tab-button[aria-selected=true] {
color: #fff !important; /*your text color */
background: #FF8800 !important; /* your background color*/
// font-size: 40px;
}