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
        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
            super.updateDisplayList(unscaledWidth, unscaledHeight);
                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

By Carbon Rider

Hi this is Yogesh, welcome to my world. Being passionate about learning new technologies and building frameworks, I end up spending most of my time in front of computer. But over last few months, I realised apart from being good coder and designer (Yes I am) I have something hidden in me. And thats called ART.

One reply on “Flex – Tab Orientation – Vertical”

Leave a Reply