Question

The language reference says “Name of CSS style declaration that specifies styles for the tabs. The default value is undefined.” But, what is the “type” of style that is being used? That is, what style properties can I put in that style definition.

For example, I wish to set the disabledColor of the text on the tab. I couldnt seem to do it. Worse, I haven’t been able to find out what I can do!

Answer 1

According to livedocs, the tabStyleName style applies to the Tab class used – which is hidden and hence not available in online reference. You can look up the source – go to the installation folder of flex and find the correct version sdk, and browse down to the file mx\controls\tabBarClasses\Tab.as – you should be able to find the style properties accepted by that class in there.

The Tab type selector defines values on the hidden mx.controls.tabBarClasses.Tab class.
The default values for the Tab type selector are defined in the defaults.css file.

You can also define the styles in a class selector that you specify using the tabStyleName style property; for example:

<mx:Style>
TabNavigator {
   tabStyleName:myTabStyle;
}
 .myTabStyle {
   fillColors: #006699, #cccc66;
   upSkin: ClassReference("CustomSkinClass");
   overSkin: ClassReference("CustomSkinClass");
   downSkin: ClassReference("CustomSkinClass");
}
</mx:Style>

---

Write the css in the style.css file

.myTabStyle
{
    disabledColor: #B0B0B0;
}

Include the CSS file in to your Application file using:

<mx:Style source="style.css"/>

Now you can set it as:

<mx:TabNavigator tabStyleName="myTabStyle" other="attributes"/>

If you don’t want a separate css file, you can inline the css using:

<mx:Style>
.myTabStyle
{
    disabledColor: #B0B0B0;
}
</mx:Style>