Adding x close button to tabs (TabbedComponent)

General JUCE discussion
1

Hi,
I was wondering if it was possible to add a close button “x” symbol like in an internent browser, to close the related window of a tabbed component?

I have a code editor in my plugin and could create tabs for each scripts but the only way to close the tab would be via a menu with closeTab() and the current active tab index.
Having a x buttn next to the title would be so much easier.

Is there a way to add this feature?

Thanks
Damien

2

Yes, you can create a custom component for each tab. See the DemoRunner::Widgets demo, which has a green star in one of the tabs, that could just as easily be a close button.

1 Like
3

Thanks Stephen , that’s working!
I went with : TabBarButton::setExtraComponent() as in the demorunner.

i override the createTabButton() virtual like this:

TabBarButton *EditorTabs::createTabButton (const String &tabName, int tabIndex)
{
	TabBarButton *btn = new TabBarButton (tabName, getTabbedButtonBar());
    EditorTabCloseButton *close = new EditorTabCloseButton(owner, tabIndex); // Added v5.6.30 creates extra component *close
    close->setSize (20,20);  // Added v5.6.30
    btn->setExtraComponent (close, TabBarButton::afterText); // Added v5.6.30 defines *close as extraComponent and sets its position
	return (btn);
}

And I defined the design for the x button with paths and mouse hover and click behaviour in a separate file for the EditorTabCloseButton

Thanks for your help

Damien