Flex – Tab Orientation – Vertical
I was looking for a way to change the default orientation of Tabs displayed in TabNavigator and couldn’t find one. So I thought of looking into the code of mx.containers.TabNavigator to see if it provides any hook to extend the functionality and luckily, I found its possible to change the orientation.
Check below sample Code
package component
{
import mx.containers.BoxDirection;
import mx.containers.TabNavigator;
import mx.core.INavigatorContent;
import mx.core.UIComponent;
import mx.core.mx_internal;
use namespace mx_internal;
public class MyTabComponent extends TabNavigator
{
public function MyTabComponent()
{
//TODO: implement function
super();
}
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
super.updateDisplayList(unscaledWidth, unscaledHeight);
if(tabBar!=null)
{
tabBar.direction = BoxDirection.VERTICAL;
for (var i:int = 0; i < numChildren; i++)
{
var containerChild:INavigatorContent =
getChildAt(i) as INavigatorContent;
if (containerChild)
{
containerChild.move(tabBar.width, 0);
containerChild.setActualSize(unscaledWidth - tabBar.width, unscaledHeight);
}
}
border.move(tabBar.width, 0);
border.setActualSize(unscaledWidth - tabBar.width, unscaledHeight);
}
}
}
}
Note that this isn't final code and will definately require changes to expose its properties and fine-tune it further, but one can get heads on how to customize tabNavigator. Here is the preview of above component
