Surely there must be a way to dynamically change the color of a tabbar icon when it is the selected tab. I thought for sure that setting style classes would work out - but so far no luck. Any help, as always, would be greatly appreciated.
Thanks
Hi Tom,
You can achieve this very simple with the CSS snippet below:
.tabs-header-tab.active i { color: green;}
Below an example of the achieved result using this CSS snippet:
It basically says the i elements (icons) inside the tab header element which is active, will be green.
Kind Regards,João
Thanks. I was assuming it would be some simple thing like that. However, I haven't been able to get it to work. Not sure where to put the css and how to associate it with the "tabs" in order to get it working. I've attached a small oml for a simple app with a 4 button tab bar. Would you be able to make the changes that would make this work. I appreciate your help.
Your problem is not with Tabs but with BottomBar items. That's what got me confused.
In that case, it's even simpler.
On your screen, you have the BottomBar block, and you just have to field the ActiveItem parameter to select the bottom bar item to be active.
Notice that the ActiveItem is zero-based, meaning that you should fill 0 for the first item to be active, 1 for the second item, and so on.
there are many problems with your oml :
1) you have made the icons white with an inline styling (on the element itself), there is no amount of CSS that can get past that
2) you have to pass information into the bottom bar widget, telling it what the selected item is. There is a parameter 'ActiveItem' for this, start counting from 0
3) in css this is not tabsheader, but a bunch of classes related to 'bottom-bar'. To understand exactly what css you should use to put in a green color, the dev tools of your browser are your best friend.
So here's an adjusted oml, where I fixed some of these things, and behaviour is already more along the lines of what you want, I think.
In my example,
I moved the default white color to css instead of inline
so this CSS
Can be seen with this effect in the browser dev tools
I simply connected the current screen to the ActiveItem, if several bottom bar items correspond with the same screen, you will have to add some logic there to decide which one you want to appear as active item...
Dorine