Tab-based Background Color Change

[benharpers]

I just went in and re-skinned my app to get rid of all the header bars so the slide doesn't look weird on iOS. All the toolbars and the page backgrounds are now the same color, and not all at the top of the page anymore, it looks a lot cooler because the app wasn't really iOS-themed to begin with.

To make the tab bar background sync up with the page background, I added some code so that when you change tabs, the tab bar changes color. It may be cooler if the tabs had this ability built-in. Here's the way it's working right now:

CSS:

   super-tabs div.toolbar-background {
     transition: background-color linear .2s;
   }

HTML:

  <super-tabs no-shadow no-border [toolbarBackground]="bgcolor" (tabSelect)="onTabSelect($event)">
    <super-tab id="page1" [root]="tabPage1" icon="menu"></super-tab>
    <super-tab id="page2" [root]="tabPage2" icon="contacts"></super-tab>
    <super-tab id="page3" [root]="tabPage3" icon="settings"></super-tab>
  </super-tabs>

JS:

   onTabSelect(ev: any) {
 
     switch (ev.id) {
       case 'page1': this.bgcolor = 'primary'; break;
       case 'page2': this.bgcolor = 'dark'; break;
       case 'page3': this.bgcolor = 'danger'; break;
     }
   }

When you let go of the swipe or if you click a tab icon, the tab bar background does a quick transition to the new pages color.

If you could add [toolbarBackground] to the super-tab, then have the super-tabs listen to the selected tab's [toolbarBackground], I think this would take care of itself without having to be hard-coded like the above, instead it would be like so:

HTML:

  <super-tabs no-shadow no-border>
    <super-tab id="page1" [root]="tabPage1" icon="menu" toolbarBackground="primary"></super-tab>
    <super-tab id="page2" [root]="tabPage2" icon="contacts" toolbarBackground="dark"></super-tab>
    <super-tab id="page3" [root]="tabPage3" icon="settings" toolbarBackground="danger"></super-tab>
  </super-tabs>

I suppose the indicator color would need to work the same way, I don't show it on my app. Anyhow, I think this would make super-tabs even more super, but I can make it work as-is if you don't think it's a good fit.