Hello everyone.
I have trying to skin TabBar and NavigatorContent.
Please see image for explanation - All tabs are transparent (alpha 0.6) and also their borders.
How can I remove top border from NavigatorContent under selected buttonTab ?
A:
<... borderSides=”left bottom right” borderStyle=”solid” borderThickness=”1″ ...>
also you can write your own skin
or extend the component itself
Eugene
2010-09-10 10:11:27
In this case border will be removed from top side. But I need to remove border just under the selected button.
im4LF
2010-09-11 11:04:17
just apply this style in case of selected state. Are you familiar with states?
Eugene
2010-09-11 14:54:22
Yes, I know about states. And I trying to use advice, but... see next post with explanation.
im4LF
2010-09-13 02:50:10
+1
A:
How its must be:
Trying to use BlendMode.ERASE:
Application code:
...
<s:SkinnableContainer blendMode="layer" ... skinClass="skins.TabBorder">
<mx:ViewStack ...>
<s:NavigatorContent label="Search" skinClass="skins.TabSkin" />
<s:NavigatorContent label="Customer Info" skinClass="skins.TabSkin" />
</mx:ViewStack>
<s:TabBar dataProvider="{myViewStack}" ... />
</s:SkinnableContainer>
...
skins.TabBorder:
<s:Rect left="0" right="0" top="25" bottom="0" radiusX="6" topLeftRadiusX="0">
<s:stroke>
<s:SolidColorStroke color="#ffffff" alpha="0.3" />
</s:stroke>
</s:Rect>
skins.TabBarButtunSkin:
<!-- its black rect which clears all under -->
<s:Rect blendMode="erase" top="0" left="0" right="0" bottom="-2" topLeftRadiusX="6" topRightRadiusX="6" includeIn="selectedStates, overStates">
<s:fill>
<s:SolidColor color="#000000" />
</s:fill>
</s:Rect>
Perhaps there is an easier way?
im4LF
2010-09-13 03:03:24
I think you already using easier way, cause all other will be few harder, and not very good solutions in design/view logic.
Eugene
2010-09-13 08:12:43