2 Replies Latest reply on Sep 24, 2010 3:53 AM by Sharma*Jyoti

    TabNavigator. Tab styles.

    KillaBee251985

      People, please help somebody! How i can change tabs style in TabNavigator (i need to change background color o fselected tab to white, and background of not selected tab to blue... and diasbel highlighting on mouseOver?

      All i can it is change color of the text

       

      My current css:

      .firstTab{

      cornerRadius: 20;

      background-color: #FF0000;

      fills: #FF0000, #ff0000;

      selection-color: #00FF00;

      fills : #FF0000, #FF0000;

      }

      .lastTab{

      backgroundColor: black;

      cornerRadius: 0;

      color: black;

      fills : #FF0000, #FF0000;

      }

      .myTabs{

      backgroundColor: black;

      cornerRadius: 0;

      color: black;

      fills : #FF0000, #FF0000;

      }

      .mySelectedTab{

      backgroundColor: haloBlue;

      color: haloBlue;

      textRollOverColor: haloBlue;

      }

      mx|TabNavigator.chatTabNavigator

      {

      backgroundColor: #ffffff;

      tab-style-name: "myTabs";

      first-tab-style-name: "firstTab";

      last-tab-style-name : "lastTab";

      selected-tab-text-style-name: "mySelectedTab";

      horizontal-gap: 5;

      tab-offset: 5;

      }

        • 1. Re: TabNavigator. Tab styles.
          Anitha Selvaraj Level 2

          Check the below code.

           

          TabNavigator {
                      backgroundColor: white;
                      cornerRadius: 5;
                      tabStyleName: "MyTabs";
                      selectedTabTextStyleName: "MySelectedTab";
                  }

           

                  .MyTabs {
                      backgroundColor: white;
                      highlightAlphas: 0.83, 0.42;
                      fillAlphas: 0.5, 0.5;
                      fillColors: #69c8e5, #43b5e6;
                      cornerRadius: 5;
                      color: black;
                      textRollOverColor: black;
                      borderColor: #2b7db0;
                      themeColor: #2b7db0;
                  }

           

                  .MySelectedTab {
                      backgroundColor: haloBlue;
                      color: haloBlue;
                      textRollOverColor: haloBlue;
                  }

           

          This will satisfy your need except disabling the highlight color on mouse over.

           

          Regards,

          Anitha

          • 2. Re: TabNavigator. Tab styles.
            Sharma*Jyoti

            Here is a sample code probably it will solve your issue.

             

            //skin class, skin is needed to remove highlight on mouse over

             

            package

            {

            import mx.skins.ProgrammaticSkin;

             

            public class TabSkinAS extends ProgrammaticSkin

            {

             

            public function TabSkinAS()

            {

            super();

            }

            override protected function updateDisplayList(unscaledWidth:Number,unscaledHeight:Number):void

            {

            graphics.lineStyle(1, 0x0000ff);

            graphics.beginFill(0x3BB9FF);

            graphics.drawRoundRect(0, 0, unscaledWidth, unscaledHeight, 10, 0);

            }

            }

            }

             

             

            // sample tab navigator application

             

            <?xml version="1.0" encoding="utf-8"?>

            <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">

            <mx:Style>

            Tab

            {

            over-skin: ClassReference("TabSkinAS");

            up-skin: ClassReference("TabSkinAS");

            }

             

            </mx:Style>

            <mx:TabNavigator id="tabNavigator" x="240" y="141" width="200" height="200">

            <mx:Canvas width="100%" height="100%" label="Canvas"/>

            <mx:Canvas label="Canvas" width="100%" height="100%"/>

            <mx:Canvas label="Canvas" width="100%" height="100%"/>

            </mx:TabNavigator>

             

            </mx:Application>

             

             

            Regards

            Jyoti