CODEWITHSUNDEEP
ionic2
Patrick1870
Patrick1870

Reputation: 353

Ionic2 tabs - how to change selected tab's color?

Like in the title, I want to change the background-color of selected tab. I didn't find any variable allowing this in the documentation. (http://ionicframework.com/docs/v2/theming/overriding-ionic-variables/). How to achieve it?

Upvotes: 2

Views: 10342

Answers (7)

Ajoy Karmakar
Ajoy Karmakar

Reputation: 671

I think you got the solution but still any other developers who are still searching the easiest and flexible way to do it, you can follow these easy steps to achieve it -

Add this extralight scss variable with base and contrast property in the "variables.scss" file and add color="extralight" attribute in ion-tabs html tag -

$colors: (
  primary:    #00a7ff,
  secondary:  #00edc5,
  danger:     #f53d3d,
  light:      #f4f4f4,
  dark:       #222,
  extralight: (
    base: #ffffff,
    contrast: #4a4a4a
  )
);

$tabs-ios-tab-text-color-active:  #00a7ff !important;
$tabs-md-tab-text-color-active:   #00a7ff !important;
$tabs-md-tab-icon-color-active	:  #00a7ff !important;
$tabs-ios-tab-icon-color-active	:  #00a7ff !important;
<ion-tabs color="extralight">
    <ion-tab [root]="complaintRoot" tabTitle="Complaint" tabIcon="information-circle"></ion-tab>
    <ion-tab [root]="paymentRoot" tabTitle="Payment" tabIcon="card"></ion-tab>
</ion-tabs>

That's it, now you are done. ☺

Upvotes: 2

Milap Shah
Milap Shah

Reputation: 97

For Ionic 2 & 3

Overwrite this class in your page scss file.

.tabs-md .tab-button[aria-selected=true] {
    color: #fff; /*your  text color */
    background: #808080; /* your background color*/
}

Hope this will help :)

Upvotes: 5

user9264198
user9264198

Reputation:

Easiest way is to;

$colors( 'primary': '#83717B' )

Upvotes: 0

Gowtham
Gowtham

Reputation: 3233

This is something that worked for me,

For android,

.tabs-md[tabsLayout=icon-hide] .tab-button,
.tabs-md[tabsLayout=title-hide] .tab-button,
.tabs-md .tab-button.icon-only,
.tabs-md .tab-button.has-title-only {
    font-weight: 900 !important; 
}
.tabs-md .tab-button[aria-selected=true] .tab-button-text {
    -webkit-transform: none !important;
    color: #fff;
}

For ios,

.tabs-ios[tabsLayout=icon-hide] .tab-button,
    .tabs-ios[tabsLayout=title-hide] .tab-button,
    .tabs-ios .tab-button.icon-only,
    .tabs-ios .tab-button.has-title-only {
        font-weight: 900 !important; 
    }
    .tabs-ios .tab-button[aria-selected=true] .tab-button-text {
        -webkit-transform: none !important;
        color: #fff;
    }

Upvotes: 0

Marko
Marko

Reputation: 957

The official way would be:

Change in your theme/variables.scss

Active icon for tabs on android is:

$tabs-md-tab-icon-color-active: red;

On iOS

$tabs-ios-tab-icon-color-active: red;

Check out Sass variables for ionic

Upvotes: 4

Patrick1870
Patrick1870

Reputation: 353

I found the answer: 

#tab-t1-0[aria-selected=true] {
     background-color: red;
     color: #000;
}

0 is the number of tab.

Upvotes: 1

Ivar Reukers
Ivar Reukers

Reputation: 7719

Setting and flipping a class.

f.e. in your constructor set:

document.getElementById("tab1").className = "tab";
document.getElementById("tab2").className = "tab";
document.getElementById("tab3").className = "tab active";

and setting some css

tab.active{
  background-color: black;
}

But if you want to override ionic's variables you should use

$colors(
  'primary': '#ffffff'
)

and setting in your html

<!-- ionic2 beta (using angular 2.0.0-RC.4)-->
<yourTab primary> 

<!-- or when using ionic2 RC0 (using angular 2.0.x) -->
<yourTab color="primary">

Upvotes: 1

Related Questions