Open New Tab on Demand in TabStrip

In some cases, you need to open new tabs on demand in the TabStrip component. You can load tabs on demand from a remote data source or create new ones in code. As an example is current modern browsers, where tab strip has a add new tab button (represented by a + icon) at the end of the tab strip.

In this article, you will learn how to create the 'add new tab' button to the TabStrip component and load tabs on demand in similar way like the one in modern browsers. A sample code is available JavaScript, Angular, React and Vue.

As demo shows, there is add new tab button at the end of the tab list. Whenever this button is clicked, there is loading animation following with creation of a new tab based on loaded data that will appear at the end of the tab list. If there are many tabs, the scrolling is enabled, using the scroll buttons you can scroll to a specific tab.

Following sections below contain sample code in JavaScript, Angular, React and Vue.

How to Add 'New Tab' Button to TabStrip

To create the 'new tab' button, you can use the last tab in the tab list. By modifying the CSS for the last tab, you can make it to appear without any border and use a + icon as its background. In this way, it will look differently than other tabs. In addition, this tab is non-selectable, which means that its content will never appear, and when clicking on it will actually create a new tab.

For this purpose, you need to create a template for tab header. The tab that acts as 'add new' button, have a key set to 'NEW' in the collection of all tabs that appear in the tab strip. Based on the tab key, you can apply a different template for tab that acts as a button and other tabs:

• JavaScript
• Angular
• React
• Vue

Create and Open a New Tab on Demand

Whenever the tab with 'add new' button is clicked, instead of selecting it you can create a new tab or load it from a remote data source and append it to the tab list. For demonstration purposes, we have set up a delay of 1 second to show loading animation, before tab is created and added to the end of the tab list.

The loading animation simulates the time required to load a tab from a remote data source. In real scenarios, the time delay is different and you still show this animation, when data is loaded, you can end it and append the tab to tab list in similar way.

• JavaScript
• Angular
• React
• Vue

In this example, a new tab object is created whenever the open new tab button is clicked. Then this tab object is added to the end of tabs array using the splice method. In addition, if there are multiple tabs the tab list is scrolled to show the newly added tab into the view.

You can replace this code, with similar one that loads tab data a from remote data source.

To prevent selection of the tab with 'add new' button, you can handle the beforeSelect event and cancel the selection process by setting the cancel field of the event data to false.

• JavaScript
• Angular
• React
• Vue

Conclusion

When initially the number of tabs is not known, you can add a button to the end of the tab strip that when clicked will load new tabs on demand. IntegralUI TabStrip component is fully customizable and allows you to modify the appearance and behavior of each tab separately. In this case, you can use the last tab to appear and behave as a button and instead of showing its content when selected; it will load new tabs from remote data source or create them in code on your side. This allows you to show a tab list in similar way the modern browsers create and open new tabs.

IntegralUI Web is an UI library of native web components that includes the TabStrip. You can use it to develop web apps in Angular, React, Vue or any other JavaScript framework.