Tab with only bottom border in Flex 4

Question

I want to style the tabs as shown above. Is it possible to do in flex ?

Please help me out. Thanks in Advance.

It would be great if you can help me with sample code for the same.

Answer 1

You have to provide custom tab button skin, and refer to it from custom tab bar skin. Here is some sample code:

<s:TabBar skinClass="MyTabBarSkin">
    <s:dataProvider>
        <s:ArrayCollection>
            <fx:String>Home</fx:String>
            <fx:String>Contact us</fx:String>
            <fx:String>About us</fx:String>
        </s:ArrayCollection>
    </s:dataProvider>
</s:TabBar>

MyTabBarSkin.as: you simply take TabBar code of spark.skins.spark.TabBarSkin and refer to your TabBarButtonSkin there in item renderer.

<s:DataGroup id="dataGroup" width="100%" height="100%">
    <s:layout>
        <s:ButtonBarHorizontalLayout gap="-1"/>
    </s:layout>
    <s:itemRenderer>
        <fx:Component>
            <s:ButtonBarButton skinClass="MyTabBarButtonSkin"/>
        </fx:Component>
    </s:itemRenderer>
</s:DataGroup>

MyTabBarButton.as:

<?xml version="1.0" encoding="utf-8"?>
<s:SparkButtonSkin xmlns:fx="http://ns.adobe.com/mxml/2009"
                   xmlns:s="library://ns.adobe.com/flex/spark"
                   alpha.disabled="0.5">

    <s:states>
        <s:State name="up" />
        <s:State name="over" stateGroups="overStates" />
        <s:State name="down" stateGroups="downStates" />
        <s:State name="disabled" stateGroups="disabledStates" />
        <s:State name="upAndSelected" stateGroups="selectedStates, selectedUpStates" />
        <s:State name="overAndSelected" stateGroups="overStates, selectedStates" />
        <s:State name="downAndSelected" stateGroups="downStates, selectedStates" />
        <s:State name="disabledAndSelected" stateGroups="selectedUpStates, disabledStates, selectedStates" />
    </s:states>

    <s:Label id="labelDisplay"
             textAlign="center"
             verticalAlign="middle"
             maxDisplayedLines="1"
             fontSize="16"
             horizontalCenter="0" verticalCenter="1"
             left="10" right="10" top="2" bottom="7">
    </s:Label>

    <s:Line includeIn="selectedStates" left="2" right="2" bottom="0">
        <s:stroke>
            <s:SolidColorStroke color="#5b36ff" weight="4" caps="round"/>
        </s:stroke>
    </s:Line>
</s:SparkButtonSkin>

Sample