PositionedTabNavigator

One of the limitations of the default TabNavigator in the Flex 3.0 framework is that it still only allows for tabs at the top of the component, either aligned on the left, right or in the center by applying the style “horizontalAlign”.

PositionedTabNavigator removes the “horizontalAlign” style, but lets you specify where you want the tabs using the style “tabPosition”.

Valid values are: topLeft, topCenter, topRight, bottomLeft, bottomCenter, bottomRight, leftTop, leftMiddle, leftBottom, rightTop, rightMiddle and rightBottom.

You can also fine tune the tabs position using the style “tabOffset”, as you can with TabNavigator.

A new TabBar was required where a position can be set so knows how to render the tabs. PositionedTabBar takes care of this, and sets its “direction” property automatically when its “position” styles is set. An instance of this in action is included in the example below.

Value values are: top, bottom, left and right.

PositionedTabSkin also checks the “position” style which is set on each PositionTab, and draws the tab with the correct rotation. PositionedTabSkin follows the Halo skin theme.

PositionedTabNavigatorExample (right click for source).

Please post any bugs in the comments and I will do my best to fix them.

This entry was posted on Monday, November 26th, 2007 at 9:15 pm and is filed under Flex 3.0. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.