Changing individual tab style in flex

问题

I have figured out a way to change the style of tabs at run time with following logic:

var cssStyle:CSSStyleDeclaration = StyleManager.getStyleDeclaration(".MyTabs");
  cssStyle.setStyle("borderColor", "red");

But here ".MyTabs" class is applicable to all the tabs between first and last tab. As per getStyleDeclaration javadoc, it only accepts "class selector" and "type selector" not the id selector.

How can I change the individual tab style at run time?

回答1:

Another user pointed out a method that I had somehow missed, allowing you to access a Tab as a Buttom and style it from there.

var t:Button = theTabs.getTabAt(index);

Tab extends Button, so there may be some things you would need the below solution for, but for basic styling this should be enough.

---

@Sebastian's answer works for a TabBar, which I know you don't have, as this is the third identical question you've asked. In order to style the tabs on a TabNavigator, you need to access the internal TabBar.

//this import may not auto-complete for you
import mx.controls.tabBarClasses.Tab;

var t:Tab = theTabs.mx_internal::getTabBar().getChildAt(index);

Now you can feel free to set the styles, as shown in Sebastian's answer.

回答2:

(tabNavigator.getTabAt(index) as Button).setStyle("borderColor", 0xFF0000);

This will solve the issue, you can set your own color as value param.

回答3:

You can call setStyle on the individual Tab's, which u can get by calling TabBar.getChildAt(x) . Check the following link, which illustrates how to achieve the task you are trying to perform. You can also check out this link

 private function tabBar_creationComplete():void {
        var colorArr:Array = ["red", "haloOrange", "yellow", "haloGreen", "haloBlue"];
        var color:String;
        var tab:Tab;
        var idx:uint;
        var len:uint = tabBar.dataProvider.length;

        for (idx = 0; idx < len; idx++) {
            var i:int = idx % colorArr.length;
            color = colorArr[i];
            tab = Tab(tabBar.getChildAt(idx));
            tab.setStyle("fillColors", [color, "white"]);
            tab.setStyle("fillAlphas", [1.0, 1.0]);
            tab.setStyle("backgroundColor", color);
        }
    }

来源：https://stackoverflow.com/questions/9805537/changing-individual-tab-style-in-flex