How do I change the color of the iontabs?

Question

How do I change the color of the iontabs?

Navigation

#1 by (2 votes)
#2 by (0 votes)

0

I would change the color of the ion tab, I could change the color of the icons and the text, but the tab itself can not modify, I am very beginner in IONIC 3. I will show the code until then. >

home-delivery.html

<ion-tabs selectedIndex="2" class="teste" >
    <ion-tab [root]="entregas" tabIcon="cube" tabTitle="Entrega"></ion-tab>
    <ion-tab [root]="perfil" tabIcon="person" tabTitle="perfil" ></ion-tab>
    <ion-tab [root]="configuracao" tabIcon="settings" tabTitle="configuracao"></ion-tab>
</ion-tabs>

home-delivery.scss

page-home-entregador {
    .teste{
        background: #545454;
    }
}

I tried other methods but they did not work so I started to try anything. If anyone can help, thank you.

ionic ionic3 tabs

asked by anonymous 07.01.2018 / 21:32

2 answers

How to format a Double by changing the semicolon and keeping 2 decimal places in VB.NET how to leave my button on the menu marked?

score 2 · Answer 1

Tab colors can be changed using Sass variables. See the conference application for an example example: link

In variables.scss:

// Use the primary color as the background for the toolbar-md-background
$toolbar-md-background:                   color($colors, primary);

// Use the default background for the tabbar since it inherits from toolbar
$tabbar-md-background:                    #f8f8f8;

// Change the color of the tabs text
$tab-button-md-active-color:              color($colors, primary);
$tab-button-md-inactive-color:            #8c8c8c;

// Change the color of the segment button text
$toolbar-md-active-color:                 #fff;
$toolbar-md-inactive-color:               #fff;
$segment-button-md-text-color-activated:  #fff;

score 0 · Answer 2

I was able to solve some tests, here is the resolution:

<ion-tabs selectedIndex="2" color="verd" >
    <ion-tab [root]="entregas" tabIcon="cube" tabTitle="Entrega"></ion-tab>
    <ion-tab [root]="perfil" tabIcon="person" tabTitle="perfil" ></ion-tab>
    <ion-tab [root]="configuracao" tabIcon="settings" tabTitle="configuracao"></ion-tab>
</ion-tabs>

This "green" in color="verd" is a color that I added in variable.scss