CODEWITHSUNDEEP
cssangularionic-frameworkionic3
ekzotech
ekzotech

Reputation: 47

How to set different color for each active tab in Ionic

I need to set color for active tab in Ionic, both for icon and text. The problem is in color: it's different for each tab, i.e. tab1 have color "red" if active, tab2 have color "green", etc. In CSS I wrote a rule:

.tab-button[aria-selected="true"] {
    color: color($colors, title-orders);
    ion-icon {
        background: color($colors, title-orders);
    }
    .tab-button-text {
        color: color($colors, title-orders);
    }

There is an <a> tag, which have value [aria-selected="true"] and 2 children elements: <ion-icon> and <span>. The <ion-icon> tag has specific class icon, for example, custom-decrees, so I can use rule, to change the icon color to color I need. But text is in the <span> tag, so I can't change it's color in CSS. How I can change color of <ion-icon> and <span> colors, based on condition for ? They are neighbor elements. As far as I know, there is no CSS-way to do it. Also, because some magic in Ionic, I can't set specific class for tab in HTML - added class doesn't appear where I need - it appears much later. How to do this in Angular using JavaScript?

UPD: Done with SCSS. Example looks like:

ion-icon[ng-reflect-name="custom-orders"] {background: color($colors, title-orders);} ion-icon[ng-reflect-name="custom-orders"] + span {color: color($colors, title-orders);}

Upvotes: 2

Views: 1042

Answers (1)

Nicol&#225;s Marzano
Nicol&#225;s Marzano

Reputation: 161

You can try the direct child selector > to select the ion-icon elements that are direct children of an a element with the adjacent sibling selector + to select the span elements that come immediately after that ion-icon:

a > ion-icon + span{
    ...
}

Alternatively you can just use a > span {...} to select all span elements that are direct children of a elements if there's nothing more inside them.

As for adding classes to tabs, I started a new "tabs" project with ionic and I can see the html for the tabs section in src/pages/tabs/tabs.html where it even has a color selector so I assume you can add particular classes to the tabs there? You can also take a look at src/theme/variables.css to see the global theme being used if you need bigger palette changes.

EDIT: finally, you can use nth-child() in combination with the previous tools to target each different tab and change the css of any of its children, for example, as seen in this fiddle, where clicking each line will change the aria-selected value but each span will get a different colour.

Upvotes: 1

Related Questions