Flex – Tab Orientation – Vertical

Spread the love

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

1 Comments

Leave a Comment.