Spark Tabs with Close Button

In a recent post here, I shared my rants regarding usability of several spark components. Well, its better to act than to complain, so I decided to try and roll my own tab control.

Easy tab navigation

For anyone who used SuperTabBar from flexlib, the functionality is more-or-less the same. However, while the SuperTab is based on mx components, mine is derived from spark TabBar. To make it light and compact, I did not implement dragging of tabs, and focused on easy to use ‘tab close’ functionality.


  • Adjustable gap through ‘gap’ style
  • Easy access to Tab skin from the TabBar via the ‘tabSkin’ style
  • Global and individual close policy
  • Default skins are supplied, used if no other skin is set


	<plus:TabBarPlus id="bar" gap="2" cornerRadius="4"
			styleName="barStyle"  closePolicy="always"

Let me know about any problems or bugs.

8 thoughts on “Spark Tabs with Close Button

  1. hi amos,
    thanx for the source. it’s been quite painfull to work with buttonBar class and this helped a lot.
    still wondering though how to make a newly added tab selected…

    var nc:NavigatorContent=new NavigatorContent();
    nc.label=”new tab”;

    tried different methods but i just can figure it out.
    any help would be (again) welcome.

  2. Do you mean something like this:

    var nc:NavigatorContent=new NavigatorContent();
    nc.label=”new tab”;

    mainStack.selectedIndex= 0; // make the new tab selected

  3. hello,
    thanx for your reply.
    in fact i found a turn around:

    // deselect all tabs

    // add new tab
    var nc:NavigatorContent=new NavigatorContent();
    nc.label=”new tab”;

    // add new tab’s content
    nc.addElement(“some component”);
    // hide tabs contents if needed (otherwise old & new contents overlap)
    if(mainStack.getElementAt(i).visible == true){

    // & finaly select new tab

    hope it'll help someone 😉

  4. Hi Amos,

    I need to change a BitmapImage inside each Tab, based on drop down list values. Do you have any tip on this? I have tried several approaches, but I didn´t manage so far.

    I tried to add a custom property “leftCustomIcon” in the dataProvider NavigatorContent and assign its value based on the drop down list index. Is there way in which the Tab can grab the “leftCustomIcon” in NavigatorContent and change the image in the tab?

    Thanks in advance for any help on this.

  5. Try to add your custom property to the tab class, and then set the skin part inside the property set function. Also make sure your bitmap is defined as a skin part, so the tab would be able to access it easily (follow the example with the close button).

    Once you got that, you should be able to set each tab individually from your custom TabBar class, and potentially access the data provider to retrieve the values.

  6. Hi friends,
    Actually i want add tab dynamically with closing option in navigator.Please help me..Thanking in advance..

Comments are closed.