How to Add and Remove Tabs in TabStrip Component
The simplest way to add tabs to the TabStrip component, is just by using HTML. However, this only works when you know what content the page will have. In some cases, when you need to add custom content, you may need to add or remove tabs dynamically during run-time. In this article, you will learn how to create and add tabs to the tab strip from code, using several different methods and events.
A sample code that shows how to add and remove tabs is available in JavaScript, Angular, React and Vue, in following sections below.
a suite of native Web Components for Angular, React and Vue
If you have any questions, don't hesitate to contact us at support@lidorsystems.com
By clicking on buttons from control panel, you can add or remove new tabs in the TabStrip Component. Each button performs a different action explained below.
In following sections below, you eill find sample code in JavaScript, Angular, React and Vue.
IntegralUI Web
Native Web Components for Angular, React and Vue
Add Tab to TabStrip
At first, you need to set an array that will hold all tabs that will appear in the tab strip. By modifying this array, the tab strip will update its content, showing tabs that are currently present in the array.
To add a new tab that will appear at the end of the tab strip, you need to create a tab object that will hold all tab specifications like id, icon and title and push that object at the end of the array.
Currently ReactJS doesn't have full support for Web Components. Mainly because of the way data is passed to the component via attributes and their own synthetic event system. For this reason, you can use available wrappers located under /integralui/wrappers directory, which are ReactJS components that provide all public API from specific IntegralUI component.
Insert a Tab at Specific Position in the Tab Strip
In cases where you need to add a tab at different position than the end of the list, you can modify the tab list using standard array methods, like splice. You can insert tab at following positions:
- Insert At - Inserts a tab at specified position
- Insert After - Inserts a tab at position after the target tab
- Insert Before - Insert a tab at position before the target tab
In all cases you need to know the index of the target tab as a reference point to determine the position at which you want to place a new tab. For example, to add a tab after currently selected tab, you can use the following code:
Remove Tab from TabStrip
You can also remove a tab from the tabstrip dynamically from code. In similar way like with adding tabs, you can remove them from the tab list. You can remove tabs by:
- Remove - Removes a specified tab from the TabStrip
- Remove At - Removes a tab which is located at specified index
- Clear - Removes all tabs from the TabStrip
Conclusion
To add or remove tabs in the IntegralUI TabStrip component, at first you need to specify an array that will hold all objects that represents the tabs. Then using standard method, you can modify this array and change the content of the tab strip, dynamically from code. Depending on the current tabs present in the array, the tab strip will update accordingly.
TabStrip is a native Web Component, part of IntegralUI Web that you can use in Angular, React, Vue and any other JavaScript framework.