Question

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.

Answer 1

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