How to change background color for each tabs?

Ionic Framework ionic-v3
1

I read the documentation but I don’t see how to change color for each tab.

For the moment, I can only change color for all tabs. Is there an easy way to change each color individually ? I tried to put color=“danger” in but it doesn’t work like this.

<ion-tabs color="primary">
  <ion-tab [root]="tab1Root" tabTitle="" tabIcon="stats"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="" tabIcon="home"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="" tabIcon="restaurant"></ion-tab>
  <ion-tab [root]="tab4Root" tabTitle="" tabIcon="map"></ion-tab>
  <ion-tab [root]="tab5Root" tabTitle="" tabIcon="cart"></ion-tab>
</ion-tabs>
2

You could always do this CSS only.

Add something like this on your app.scss:

.tabbar {
	a:nth-of-type(1) {
		background-color: orange;
	}
	a:nth-of-type(2) {
		background-color: purple;
	}	
}

Are you trying to create some sort of rainbow :smiley:

3

:smile:

No, not a rainbow but a disco app for sure.

In fact, I’d like to change the color of the whole line in each page. When I say “tab”, I meant “tab-bar”.

4

Haha okay. Same same but different:

.tabbar {
  background: yellow;
}
5

Yes, but for each page. Arg, I struggle with my english right here.

I have a tabbar with 5 icons, when I click on each icon, I go to a different page and I’d like for each page a different color for the tab bar like I can do when I put color=‘blue’ in <ion-navbar> for example.

6

Aaaah I’m getting you know. So you want to dynamically change the color of the tabbar based on the active tab. So here’s what you could try.

attach an ngClass to ion-tabs like this:
<ion-tabs [ngClass]="custom_color">

inside your typescript class declare the variable my_custom_class and give it some value like tabbar_red.

this will give you a dom tree like this:

.tabbar_red .tabbar { 
  background: red;
}

Now, on on of your tabs use (ionSelect) like this:
<ion-tab [root]="tab2Root" tabTitle="" tabIcon="home" (ionSelect)="changeCustomClass('tabbar_yellow')"></ion-tab>

Now inside your tabs.ts create a function called changeCustomClass() like this:

changeCustomClass(new_class:string) {
  this.my_custom_class = new_class;
}

in your app.scss you then should have something like this to make this work:

.tabbar_red .tabbar { 
  background: red;
}
.tabbar_yellow .tabbar {
  .background: yellow;
}

etc.

7

Thanks a lot for your help but I think I did some mistakes because I get errors, here’s the code :

@Component({
  templateUrl: 'tabs.html'
})
export class TabsPage {

  tab1Root = Statistics;
  tab2Root = Home;
  tab3Root = Food;
  tab4Root = Transports;
  tab5Root = Shopping;

  my_custom_class = 'tabbar_red';

  constructor() {

  }
  changeCustomClass(class: string) {
  this.my_custom_class = class;
}

}

<ion-tabs [ngClass]="custom_color">
  <ion-tab [root]="tab1Root" tabTitle="" color="danger" tabIcon="stats"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="" tabIcon="home" (ionSelect)="changeCustomClass('tabbar_yellow')"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="" tabIcon="restaurant"></ion-tab>
  <ion-tab [root]="tab4Root" tabTitle="" tabIcon="map"></ion-tab>
  <ion-tab [root]="tab5Root" tabTitle="" tabIcon="cart"></ion-tab>
</ion-tabs>


.tabbar_red .tabbar {
  background-color: red;
}
.tabbar_yellow .tabbar {
  background-color: yellow;
}
8

what errors are you getting?

9 
Error	Typescript	Parameter declaration expected.	25:21
Error	Typescript	';' expected.	25:34
Error	Typescript	Unexpected token. A constructor, method, accessor, or property was expected.	25:36
Error	Typescript	'{' expected.	26:31
Error	Typescript	Declaration or statement expected.	29:1
10

Where did you add those?

11

I add that in the file app.scss

12

Okay that’s the right place off course. Could you be more precise which piece of code gave you that error? At first glance I don’t see anything out of the ordinary.

13

It’s the tab.ts file. I get error specifically on the function changeCustomClass

import { Component } from '@angular/core';

import { Statistics } from '../statistics/statistics';
import { Home } from '../home/home';
import { Food } from '../food/food';
import { Transports } from '../transports/transports';
import { Shopping } from '../shopping/shopping';

@Component({
  templateUrl: 'tabs.html'
})
export class TabsPage {

  tab1Root = Statistics;
  tab2Root = Home;
  tab3Root = Food;
  tab4Root = Transports;
  tab5Root = Shopping;

  my_custom_class = 'tabbar_red';

  constructor() {

  }
  changeCustomClass(class: string) {
  this.my_custom_class = class;
}

}
14

Sorry, I’m a fool. This isn’t gonna work (class is reserved):

  changeCustomClass(class: string) {
  this.my_custom_class = class;
}

change it into:

  changeCustomClass(new_class: string) {
  this.my_custom_class = new_class;
}

also, change the background-color into background.

1 Like
15

Perfect, it works ! Thanks a lot ! My rainbow is ready !

note : what do you mean by my class is reserved (I’m learning coding in the same time as learning angular 2 and Ionic)

1 Like
16

hahaha discotime!!!

17

The class keyword is a reserved name/keyword, as it’s how you declare a class. What this means is that you can’t use it as a variable name as when the compiler encounters it, it thinks that you’re declaring a class. Which of course in this case you’re not, hence the errors!

2 Likes
18

Reserved words are enumerated in here.

2 Likes