How can I have different colors for different tabs in SuperTabNavigator.

Question

Hi

Well the heading is basically what my question is:

How can I have different colors for different tabs in SuperTabNavigator.

Below is the code to my SuperTabNavigator with three tabs:

<containers:SuperTabNavigator x="0"
                     y="10"
                     width="100%"
                     height="100%"
                     right="1"
                     top="1"
                     left="1"
                     bottom="1" color="black"
                     creationPolicy="all"
                     id="tab_nav" popUpButtonPolicy="{SuperTabNavigator.POPUPPOLICY_OFF}">
        <mx:Canvas label="My Friends" id="friends_container" width="100%" height="100%"/>
<mx:Canvas label="My Groups" id="groups_container" width="100%" height="100%"/>
<mx:Canvas label="Address Book" id="address_container" width="100%" height="100%"/>
</containers:SuperTabNavigator>

I want to have different color for every different tab.

How should I do this.

I know there is a firstTabStyleName and lastTabStyleName: is there any way to have the secondTab or the middleTab, anything like that could help me to have different colors on tabs as well.

Thank you Zeeshan

Answer 1

doesn't look like they have styles for that. You may not be able to have separate styles without doing your own tab bar extension.

Answer 2

Okey I really did not get a very good answer to this. But I found a way that solves my purpose.

<containers:SuperTabNavigator x="0"
                 y="10"
                 width="100%"
                 height="100%"
                 right="1"
                 top="1"
                 left="1"
                 bottom="1" color="black"
                 creationPolicy="all"
                 tabStyleName="secondTabGradient"
                 firstTabStyleName="firstTabGradient"                    
                 lastTabStyleName="lastTabGradient"
                 id="tab_nav" popUpButtonPolicy="{SuperTabNavigator.POPUPPOLICY_OFF}">
    <mx:Canvas label="My Friends" id="friends_container" width="100%" height="100%"/>

So the firstTabGradient get the style for first tab, secondTabGradient for second tab and the lastTabGradient for last tab, which for me is the third tab.

This way get three different colored tabs.

I am still working on the css part. But it is good enough for any references:

    <mx:Style>
    .firstTabGradient
    {
        backgroundImage: ClassReference("custom.GradientBackground");
        backgroundSize: "100%";
        background-color: green;
        fillColors: #23b34d, #06832a;
        fillAlphas: 1, 1;           
    }
    .lastTabGradient
    {
        backgroundImage: ClassReference("custom.GradientBackground");
        backgroundSize: "100%";
        background-color: blue;
        fillColors: #028edf, #02bba0;
        fillAlphas: 1, 1;
    }
    .secondTabGradient
    {
        backgroundImage: ClassReference("custom.GradientBackground");
        backgroundSize: "100%";
        background-color: red;
        fillColors: #d70324, #a6001a;
        fillAlphas: 1, 1;
    }

</mx:Style>

Thank you Zeeshan