How do I change the color of an active ionic tab?

问题

I am trying to change the background color of an active ionic tab from white to green. I found this thread but it seems like the answer doesn't work anymore:

https://forum.ionicframework.com/t/change-color-of-active-state-in-tab-icons/12547

Does anybody know how to do this?

Thanks.

回答1:

add style to .tab-item-active class like this

.tab-item-active {
    background:green;
}

see this codepen:http://codepen.io/edisonpappi/pen/aWvmjz

回答2:

For me, setting the CSS rules for the class ".activated" worked.

.activated {
   background-color: blue;
}

This class is applied momentarily to the tab item that is selected.

回答3:

This can be done in the following way:

Ionic has the following css:

.tab-item.tab-item-active, .tab-item.active, .tab-item.activated {
    opacity: 1;
}

you need to override it as follows:

.tab-item.tab-item-active, .tab-item.active, .tab-item.activated {
    color: red;
}

回答4:

You can also use the SCSS $tabs-ios-tab-icon-color-active var inside your theme/variables.scss, for example :

// App iOS Variables
// --------------------------------------------------
// iOS only Sass variables can go here

$tabs-ios-tab-icon-color: #00f;
$tabs-ios-tab-icon-color-active: #f00;


// App Material Design Variables
// --------------------------------------------------
// Material Design only Sass variables can go here

$tabs-md-tab-icon-color: #00f;
$tabs-md-tab-icon-color-active: #f00;

which will give you something like this :

For more, take a look here.

Hope that can help.

来源：https://stackoverflow.com/questions/43463223/how-do-i-change-the-color-of-an-active-ionic-tab

标签

ionic-framework