5

I am using Ionic 4.12 I am working with the tab component, and i want to change the color of my ion-icon svg when i activate that tab. I'm trying to change the shadow dom of the ion-tab-button as the documentation shows with

--color-selected

--background-focused

in the css but it does not change it

tab bar code

<ion-tab-bar slot="bottom">
<ion-tab-button tab="mainview">
  <ion-icon src="assets/logo/mainView.svg"></ion-icon>
  <ion-label>INDICADORES</ion-label>
</ion-tab-button>

<ion-tab-button tab="profile">
  <ion-icon src="assets/logo/profile.svg"></ion-icon>
  <ion-label>PERFIL</ion-label>
</ion-tab-button>

<ion-tab-button tab="">
  <ion-icon src="assets/logo/phone.svg"></ion-icon>
  <ion-label>LLAMAR</ion-label>
</ion-tab-button>

<ion-tab-button tab="caregivers">
  <ion-icon src="assets/logo/doc.svg"></ion-icon>
  <ion-label>CUIDADORES</ion-label>
</ion-tab-button>

<ion-tab-button tab="help">
  <ion-icon src="assets/logo/help.svg"></ion-icon>
  <ion-label>AYUDA</ion-label>
</ion-tab-button>

current css of the icons

ion-tab-button{
font-size: 10px;
--padding-end: 0px;
--padding-start: 10px;
--padding-bottom: 0px;
--margin-left:0px;
--margin-right:0px;
max-width:100px;
ion-icon{
    font-size: 67.5px;
}
J.Soto
  • 155
  • 1
  • 2
  • 10

7 Answers7

6
ion-tab-button{
font-size: 10px;
--background-focused: #a0a;
--color-selected: #a0a;
--padding-end: 0px;
--padding-start: 10px;
--padding-bottom: 0px;
--margin-left:0px;
--margin-right:0px;
max-width:100px;
ion-icon{
    font-size: 67.5px;
}}

enter image description here

this is the correct ionic way

Ira Watt
  • 2,095
  • 2
  • 15
  • 24
  • I was using it withouth the !important value so it was not wotking for some reason, now It is working in the ionic way, thank you – J.Soto Apr 08 '19 at 17:20
4

If you want to give another color when a class is active you can simply do the following:

.class:active {
    color: blue; 
}

However in your case this would be:

ion-tab-button:active{
    color: blue;
}

The color atribute also works with hex and RGB codes (see https://www.w3schools.com/cssref/css_colors_legal.asp for more)

I also reccomend to check this post out as this is related to the problem you are having at the moment. Editing Ionic tab icon styles

R_ Flintstone
  • 51
  • 9
1

This is the below CSS, we need to add it in component level CSS if we need to apply the styles only to the specific page.

Use of focus pseudo class, we can apply the style to the selected ion-tab-button

ion-tab-button:focus {
    ion-icon, ion-label {
        color: var(--ion-color-primary) !important;
        --ion-color-base: var(--ion-color-primary) !important;
    }
}
Madhusree Chinnadurai
  • 11
  • 2
1

This is much more difficult to figure out than it should be but here's what worked for me:

In theme/variables.css

:root {

  /*put at the bottom after all other base styles*/
  --ion-tab-bar-color: #2a3042;
  --ion-tab-bar-color-selected: #556ee6;

}
Christine Treacy
  • 163
  • 7
0

You can provide the custom css to selected tab. Whenever you select the tab "tab-selected" class is added in ion-tab-button.

.tab-selected {
  border-bottom: 5px solid blue;
}
Mayur Lokare
  • 1
0

There is one more way to customize your tabs in ionic. (my ionic version 6.12.0)

ion-tab-bar{
    background-color: white;
    overflow-x: auto;
    border:0px;
}

ion-tab-bar > ion-tab-button {
 
  border-radius: 20px 20px 20px 20px;
}

ion-tab-button[aria-selected=true] {
    color:white;
    background-color: #3689ef;
 }

 
 ion-tab-bar  ion-tab-button[aria-selected=true]:first-child {   
    border-radius: 0px 20px 20px 0px;
 }
 ion-tab-bar  ion-tab-button[aria-selected=true]:last-child {
  
    border-radius: 20px 0px 0px 20px;
 }
Deepak
  • 125
  • 2
  • 12
0

I know i'm four years late but i was searching for an answer to this and it took me some time to find an answer. The only thing that worked for me was this so i hope that it can help someone :

.tab-button[aria-selected="true"] {
  --background: white !important;
  background-color: white !important;

  .tab-icon {
    color: red !important;
  }

  .tab-label {
    color: red !important;
  }
}

tab-label is the class of <ion-label> tags, tab-icon is for <ion-icon> and tab-button is for <ion-tab-button>

everything with --color-selected was only changing the color of the ripple when I click on the button or doing nothing. It works on my browser (chrome) and i tested it on my phone too (android).

@ionic/angular 6.3.9

EDIT: after updating to @ionic/angular 6.7.1 this stopped working so i switched to using this.

.tab-selected {
  background-color: #.....;
  color: #.....;
  border-bottom: ...px solid #.....;

    .tab-icon {
       color: #..... !important;
    }

    .tab-label {
       color: #..... !important;
    }
  }

ionic add tab-selected to the classes of the

B.SEBAALY
  • 1
  • 1