TabNavigator containers come with a handful of styles that allow you to customize the appearance of the tabs:
tabStyleName
Name of CSS style declaration that specifies styles for the tabs. The default value isundefined
.firstTabStyleName
Name of CSS style declaration that specifies styles for the first tab. If this is unspecified, the default value of thetabStyleName
style property is used.lastTabStyleName
Name of CSS style declaration that specifies styles for the last tab. If this is unspecified, the default value of thetabStyleName
style property is used.selectedTabTextStyleName
Name of CSS style declaration that specifies styles for the text of the selected tab.
But sadly, you cannot easily specify a CSS style declaration for the selected tab. You can only specify a style for the text of the selected tab.
This sucks.
Luckily, there is a better way to customize the appearance of the tabs, without being constrained or limited by the styles mentioned above. You can skin them!
In the CSS for your application, create a new style declaration for your tabs. Then define values for any or all of the skin properties: skin
, disabledSkin
, downSkin
, overSkin
, upSkin
, selectedDisabledSkin
, selectedDownSkin
, selectedOverSkin
, selectedUpSkin
.
Now this is where it gets beautiful. The values you specify for the skin properties can point to custom components OR embeddable assets!
You can use ClassReference()
to specify custom components and Embed()
to specify custom assets like images or SWFs.
What’s great about this solution is that you can also use the standard TabNavigator styles in tandem with the custom skins.
This means you can skin the tab backgrounds with a GradientCanvas container, for example, and use the tabStyleName
and selectedTabTextStyleName
styles to customize the tab fonts!
Update: I’ve posted sample code below that uses a Canvas
container and some basic black-and-white styles to demonstrate how this works!
Sample code for the custom styles:
.tab { up-skin: ClassReference("TabSkin"); down-skin: ClassReference("TabSkin"); over-skin: ClassReference("TabSkin"); selected-up-skin: ClassReference("SelectedTabSkin"); background-color: #FFFFFF; font-weight: normal; corner-radius: 0; border-style: solid; .selectedTab font-weight: bold; corner-radius: 0; border-style: solid; |
Sample code for the tab skins:
package { import mx.containers.Canvas; public class TabSkin extends Canvas { override protected function updateDisplayList (w : Number, h : Number) : void { this.styleName = "tab"; super.updateDisplayList (w, h); } } package public class SelectedTabSkin extends Canvas super.updateDisplayList (w, h); } |
Sample code for the TabNavigator container:
<mx:TabNavigator id="tabs" tabStyleName="tab" selectedTabTextStyleName="selectedTab" /> |
16 comments
Comments feed for this article
June 4, 2008 at 6:16 am
chriswaugh
Hi there!
I’m new to Flex and this is pretty much exactly what I need, thanks!
Unfortunately the sample code links don’t seem to work, is there any chance you could update them?
June 4, 2008 at 7:20 am
Nick Schneble
Sorry about that!
For whatever reason, all of my Private Paste URLs before February 21, 2008 seem to no longer be working.
I’ve emailed them to see if it’s a problem on their end, but in the meantime, I’ll see if I can quickly recreate the sample code!
July 7, 2008 at 10:32 am
ironball
Please allow me to second this. This post is the exact solution to a problem I’m having at this very moment. I am sure I can find the answer by trial and error, but if I’m stuck, I’m sure other people are too!
On the other hand, if I do solve it on my own, I will be sure to post examples in an edit.
July 7, 2008 at 10:32 am
ironball
Please allow me to second this. This post is the exact solution to a problem I’m having at this very moment. You put us on the right track, so I am sure I can find the exact syntax by trial and error, but if I’m curious for example code, I’m sure other people are too.
On the other hand, if I do solve it on my own, I will be sure to post examples in an edit.
July 7, 2008 at 10:40 am
Nick Schneble
Apologies! I wasn’t able to recover the code samples I created for this post and uploaded to Private Paste, so I have to recreate them all from scratch.
I’ll do my best to recreate the code asap!
July 7, 2008 at 12:18 pm
Nick Schneble
@chriswaugh, ironball
I’ve updated the post with some fresh sample code!
October 13, 2008 at 2:55 am
messingwithflex
Hi!
I’m totally new with Flex 3 and ActionScript 3, so maybe that’s why I ran into problems already. I’m building TabNavigator and tried to follow this example, but I get error “Definition SelectedTabSkin couldn’t not be found” and “Definition TabSkin could not be found”. I’ve myPackages.as file where I have those classes. Should I import myPackages somehow or what I could be missing?
October 13, 2008 at 3:29 am
messingwithflex
Problem solved. Maybe I should read the manual first. I just noticed that there has to be different .as file for every public class.
October 13, 2008 at 8:07 am
Nick Schneble
I’m glad you were able to figure it out!
January 16, 2009 at 2:06 am
How to Skin The Tabs in a TabNavigator Container « aodz
[…] post here Tags: flex, skinning, […]
July 26, 2011 at 12:19 pm
Simion Ploscariu
Thank you,this helped me a lot
July 26, 2011 at 12:26 pm
Nick Schneble
No problem!
July 28, 2011 at 11:16 am
David Dos Santos Alves
Hi,
Thank you I was looking for this solution. Unfortunately I can’t figure why the selectedTab does not apply the other font styles:
font-weight: bold;
color: #FFFFFF;
text-roll-over-color: #FFFFFF;
It keeps the other ones (from .tab). I managed to get the gradient with info from another of your posts by adding
// retrieves the user-defined styles
var fillColors : Array = getStyle (“fillColors”);
var fillAlphas : Array = getStyle (“fillAlphas”);
var cornerRadius : Number = getStyle (“cornerRadius”);
// converts the fill colors to RGB color values
StyleManager.getColorNames (fillColors);
// ready to draw!
graphics.clear ();
// draws the gradient
drawRoundRect (0, 0, w, h, cornerRadius, fillColors,
fillAlphas, verticalGradientMatrix (0, 0, w, h));
to the SelectedTabSkin.
But I cannot find a solution to change the text color. Any suggestions?
Thanks again.
July 29, 2011 at 1:18 am
Nick Schneble
Have you looked at setting the selectedTabTextStyleName style? It’s responsible for styling the text of the selected tab.
December 6, 2013 at 11:53 am
Isaac Antonio Cacho Guerrero
Same error here, even using the selectedTabTextStyleName style, any idea?
December 6, 2013 at 1:41 pm
Nick Schneble
@Isaac, can you post or link to a sample of your code? What version of Flex are you using?