I'm having the hardest time finding a way to simply add rounded tabs to a TabNavigator control.
I have seen examples which seem to be really simple but they don't seem to work in Flex 4.5. Here is some sample code:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Style source="style.css"/>
<mx:TabNavigator x="93" y="90" width="571" height="293" tabStyleName="tabstyle">
<s:NavigatorContent width="100%" height="100%" label="Tab 1">
</s:NavigatorContent>
</mx:TabNavigator>
</s:Application>
and the css:
/* CSS file */
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
.tabstyle
{
corner-radius: 10;
}
I have also tried cornerRadius: 10;
Any ideas why this does not work? Any easy to follow solution (I'm a beginner).
Thanks.
You could create a skin for your app/tab navigator, use the 'create copy of' option in Flash Builder, and in the Rect section, set the radiusX, radiusY values. Then use that skin for the component