CODEWITHSUNDEEP
flashapache-flexflash-builder
Himanshu Yadav
Himanshu Yadav

Reputation: 13587

Change style of tabs in Flex 3

I am new to Flex 3.4. I want to change style of few tabs (highlight them) on click of a button. I came from a javascript background and not able interpret in Flex's way.

Upvotes: 1

Views: 885

Answers (1)

Wesley Petrowski
Wesley Petrowski

Reputation: 1131

Styling tabs in Flex is sort of tricky - the TabBar and TabNavigator classes have a style called tabStyleName, which is the name of another separate style that defines the look of your tabs. Here's an example which changes a set of tabs from a red background to blue by changing the tabStyleName style on the TabBar - hopefully you can adapt it to whatever you need.

  <mx:Style>
    .redTabs {
      fillColors: #cc0000, #cc0000;
    }

    .blueTabs {
      fillColors: #0000cc, #0000cc;
    }
  </mx:Style>

  <mx:Script>
    <![CDATA[
      protected function changeStyle(event:MouseEvent):void
      {
        theTabs.setStyle("tabStyleName", "blueTabs");
      }
    ]]>
  </mx:Script>

  <mx:TabNavigator id="theTabs" x="10" y="10" width="200" height="200" tabStyleName="redTabs">
    <mx:Canvas label="apple" width="100%" height="100%">
    </mx:Canvas>
    <mx:Canvas label="orange" width="100%" height="100%">
    </mx:Canvas>
    <mx:Canvas label="banana" width="100%" height="100%">
    </mx:Canvas>
  </mx:TabNavigator>

  <mx:Button x="10" y="218" label="Change Style!" click="changeStyle(event)"/>

Edit: I've changed the example to work with TabNavigator.

Upvotes: 1

Related Questions