Question

I have a TabNavigator with custom skins on the buttons and inside the content. I want to put an image behind the individual Tabs. One long bar of about 20px high that runs the width of the control. The buttons and the navigator content are both spark components while the actual tab navigator control group is of type mx. The only property I can change is the background color. Is there a way I can just tell the background to position itself as top=”-10″ or something similar or do I need to go the CSS route?

Answer 1

It looks like this question came up before here, in which the answer was to use the Flex Style Navigator found at:

http://examples.adobe.com/flex3/consulting/styleexplorer/Flex3StyleExplorer.html

In their sandbox, I can style the tab background as transparent; however, when I apply the CSS to my MXML, I cannot replicate the background alpha:

@namespace mx "library://ns.adobe.com/flex/mx";

mx|TabNavigator {
   backgroundAlpha: 1;
   tabStyleName: "myTabs";
   firstTabStyleName: "myTabs";
   lastTabStyleName: "myTabs";
   selectedTabTextStyleName: "mySelectedTabs";
}

.myTabs {
   highlightAlphas: 0, 0;
   fillAlphas: 0, 0;
   backgroundAlpha: 0;

}

.mySelectedTabs {
}