Noob question individual tab colors - not single color for all

ionic-v1
1

Just starting out so pardon if this is a ridiculously simple question. I experimented with this but am not getting anywhere.

Net-net what I’m trying to do is to have a continuous color on the header, page and tab all the same color. Different for each tab.

Picture a 4 tab app - yellow, orange, red, blue tabs. Click blue tab, background goes blue along with header. Yellow tab is tapped and everything (but the other tabs) goes yellow. Sort of emulating a true paper tabbed booklet so to speak.

Ideally I’d also like the option - though I’m not sold on the design aspect of this yet - to use a background JPG or PNG that would go from header to tab. If I had to I can fake this in photoshop by fading out to solid colors top and bottom - but I am not sold on the design yet, as I said, so this may change.

Any suggestions on how to approach this?

Thanks tons in advance.
< flame shield on >

2

Bump to hopefully get some more eyeballs on this. Would love some tips.

Thanks!

3

Here’s how to change the background-color of the tabs:
(I use SASS)

.tab-item {
  background-color: $energized;
  opacity: 1;
}
.tab-item+.tab-item  {
  background-color: $balanced;
}
.tab-item+.tab-item+.tab-item  {
  background-color: $calm;
}
.tab-item+.tab-item+.tab-item+.tab-item  {
  background-color: $positive;
}

Bonus:
Set the background of the active tab

/* active tab */
.tab-item.tab-item-active, .tab-item.active, .tab-item.activated {
  background-color: $light !important;
  color: $assertive !important;
}

For the tab contents, give your a class name:

<ion-view class="tab1-content"></ion-view>

Then add CSS for it:

.tab1-content.pane { background-color: $energized; }
2 Likes