The vertucal tab is very cool. Just what I expect. But I can’t figure out how it works (e.g make the atbs on the right side of the page).

Can you please send me a sample mxml code?

Thanks in advance

You can make a copy of TabSkin.as inside your project and rename it to VerticalTabSkin.as (don’t forget to change the package and the class name). Then change the code that rounds the corners (see the post for the code snippets).

On your style sheet (for example style.css) tell the TabBar to use the new skin (adapt to point to your new skin package):

Tab.verticalTab
{
disabledSkin: ClassReference(”com.flexdevil.skins.VerticalTabSkin”);
downSkin: ClassReference(”com.flexdevil.skins.VerticalTabSkin”);
overSkin: ClassReference(”com.flexdevil.skins.VerticalTabSkin”);
selectedDisabledSkin: ClassReference(”com.flexdevil.skins.VerticalTabSkin”);
selectedDownSkin: ClassReference(”com.flexdevil.skins.VerticalTabSkin”);
selectedOverSkin: ClassReference(”com.flexdevil.skins.VerticalTabSkin”);
selectedUpSkin: ClassReference(”com.flexdevil.skins.VerticalTabSkin”);
upSkin: ClassReference(”com.flexdevil.skins.VerticalTabSkin”);
}

In your application make sure to reference the style sheet and then declare your TabBar:

<mx:TabBar direction=”vertical” dataProvider=”{['tab1','tab2']}” tabStyleName=”verticalTab”/>

I hope this helps.