7 Replies Latest reply on Jan 4, 2007 9:39 PM by

    Different Styles for Tabs in a TabNavigator?

    feef10
      In a TabNavigator, is it possible to have 2 tabs with, say, blue background while others have green background?

      Thanks in advance!
      - James
        • 1. Re: Different Styles for Tabs in a TabNavigator?
          peterent Level 2
          You can change the colors of tabs by doing the following:

          <mx:TabNavigator backgroundColor="green" tabStyleName="BlueTabs" ... >

          <mx:Style>
          .BlueTabs { fill-colors: #0000FF,#0000FF; }
          </mx:Style>

          The backgroundColor of the TabNavigator is used as the color for the selected tab. This is normally white, but in this example it will be Green. The remaining tabs are styled with the BlueTabs style class selector. This is a solid blue, but you can change the fill-colors to be any 2 colors and you can change the fill-alphas as well.
          • 2. Re: Different Styles for Tabs in a TabNavigator?
            feef10 Level 1
            Hi Peter,

            Thanks for the reply. However, what I intended was to have two kinds of tabs. The use case is like this: it will have 3 fixed tabs and then users can add any number of user tabs, and I like the user tabs to display a different color/style. Is there a way to hack this? Perhaps I am asking for too much from TabNavigator.

            -James
            • 3. Re: Different Styles for Tabs in a TabNavigator?
              peterent Level 2
              It may be possible to do this by making some new skins for the TabNavigator. This task is really beyond this forum. Skinning is particularly hard, but you need to get yourself up to speed - there are good chapters in the Flex 2 documentation about making skins.

              Check my blog, July 17, 2006 entry, for more information on skins, too.

              When you write the skin you'll need to have a way for the skin to tell what color it should be - just something to keep in mind.
              • 4. Re: Different Styles for Tabs in a TabNavigator?
                iceboxqs
                Know of any reason the style

                selected-fill-colors: red, black;

                doesn't have any effect on the tabs in a tabnavigator or tabbar.

                Have tried setting the style by using a custom class and by just applying a style to all Tabs. The fill-colors works but the selected-fill-colors does nothing.

                http://weblogs.macromedia.com/mc/archives/FlexStyleExplorer.html has an example that works and shows the css being used. Is there another switch I need to flip to have the selected-fill-colors to work?

                <mx:Style>
                .viewTabs {
                fill-colors: red, black; /* this works */
                selected-fill-colors: #3300cc, #ffffff; /* this doesn't */
                }
                </mx:Style>

                <mx:TabNavigator x="63" y="167" width="200" height="200" tabStyleName="viewTabs">
                <mx:Canvas label="Tab 1" width="338" height="100%">
                </mx:Canvas>
                <mx:Canvas label="Tab 2" width="100%" height="100%">
                </mx:Canvas>
                <mx:Canvas label="Tab 3" width="100%" height="100%">
                </mx:Canvas>
                </mx:TabNavigator>
                • 5. Re: Different Styles for Tabs in a TabNavigator?
                  peterent Level 2
                  The selected-fill-colors style is ignored by the TabNavigator. Probably should say that in the documentation. The selected tab's color is the same as the TabNavigator's backgroundColor:

                  <mx:TabNavigator backgroundColor="0xFF00FF" ... >

                  The selected tab will now be magenta.
                  • 6. Re: Different Styles for Tabs in a TabNavigator?
                    iceboxqs Level 1
                    Yeah, just found about this from another site

                    "selectedFillColors for tabs was available in Flex 1.5 (as you'll see in the Flex 1.5 style explorer), but was changed in Flex 2.0. Now the the color on the selected tab is defined by "backgroundColor". If you'd like a gradient on the selected tab, you can skin the tabs, otherwise, background is your only option in Flex 2.0."
                    • 7. Re: Different Styles for Tabs in a TabNavigator?
                      How does one go about changing the selected (or active) tabs text color?