Tabs with Close Button in TabStrip Component

Usually tabs in IntegralUI TabStrip component displays only a title. By creating a custom template for tab header, you can add custom HTML elements and arrange it in custom layout. In this example, we will show you how to add a close button to each tab header.

In following sections below, you will find sample code in JavaScript, Angular, React and Vue that shows tabs with close button.

In above demo, each tab header along with its title also displays an icon on left and a close button on the right side. Whenever the close button is clicked, the tab is removed from the tabs collection.

The complete sample code is available in Quick Start application as part of IntegralUI Web library.

How to Add Close Button to Tab Header

To enhance the tab header with custom content, you can create a custom template and apply it to the tab header. When using templates, any content set will override the default tab header.

In our case, the template for tab header contains three elements:

• <span> element - its background is an image that will represent the tab icon
• <span> element - shows the tab title
• <img> element - a button shown as image

• JavaScript
• Angular
• React
• Vue

You can set custom CSS styles in a separate file and apply them to the TabStrip using customStyle property. In this example, one image is used as a resource for icon in each tab and close button changes opacity on hover.

Remove a Tab using the Close Button

To remove the tab when close button is clicked, you need to handle the mousedown event. We are not handling the click event because when button is clicked the tab will also become selected. Because tab will be removed, to prevent selection you can handle the mousedown event and suppressing any propagation of the click event.

• JavaScript
• Angular
• React
• Vue

Whenever tab is removed, you also need to update the current selection. You can do this in event handler for the close button, and set selection to a new tab:

• JavaScript
• Angular
• React
• Vue

Conclusion

In some cases, tab headers may need to present more content, than simply a title. The IntegralUI TabStrip component, comes with built-in feature that allow you to customize the appearance and behavior of tab header using custom templates and CSS styles.

In this demo, there are few tabs with custom header, showing an icon, title and close button in it. Whenever close button is clicked, the tab is removed from the tab strip and a different tab is selected.

TabStrip is part of IntegralUI Web, a suite of native web components that you can use to develop applications in Angular, React, Vue or other JavaScript frameworks.