CODEWITHSUNDEEP
apache-flextabbar
gcstr
gcstr

Reputation: 1537

Flex 4.6 TabbedViewNavigator - Remove Border

How to completely remove the button borders of a TabbedViewNavigator in Flex?

I've tried CSS, replacing the skin in AS and MXML with no luck:

tab .

I want to create a custom skin to the TabBar, replacing the background image and the labels with icons, is it possible?

Upvotes: 0

Views: 1082

Answers (2)

Asad
Asad

Reputation: 1837

Create a custom skin with spark.components.TabbedViewNavigator as HostComponent and define following components to make it work. Now skin your TabBar as u wish. You can add Image instead of Label.

enter image description here

Upvotes: 1

proweb
proweb

Reputation: 306

Yes, everything is possible with skins. TabBar is part of TabbedVieNavigator and also TabBar is inherited from ButtonBar. You should to create skin for ButtonBar and set it for your TabbedViewNavigator #tabBar like this:

<fx:Style>
    @namespace s "library://ns.adobe.com/flex/spark";
    s|TabbedViewNavigator #tabBar
    {
        skinClass: ClassReference("views.skins.TabbedViewNavigatorTabBarSkin");
    }
</fx:Style>

where TabbedViewNavigatorTabBarSkin is Skin of ButtonBar host component, please look at the screen below:

Creating skin

Then you just creating you own skins for ButtonBar buttons and set own BG color and icon and other things, which you want. Hope this help you.

Upvotes: 2

Related Questions