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.
<html>
<head>
<link rel="stylesheet" href="./tabstrip-addremove.css" />
</head>
<body>
<div class="sample-block">
<div id="tabstrip-addremove">
<iui-tabstrip id="tabstrip-addremove"
resource-path="../../integralui/icons"
></iui-tabstrip>
</div>
<div class="empty-block">TabStrip is empty.</div>
<div class="tabstrip-addremove-panel">
<iui-button id="add">Add</iui-button>
<!-- . . . -->
</div>
</div>
</body>
<script type="module" src="../../integralui/components/integralui.button.js"></script>
<script type="module" src="../../integralui/components/integralui.tab.js"></script>
<script type="module" src="../../integralui/components/integralui.tabstrip.js"></script>
<script type="module">
import IntegralUITab from '../../integralui/components/integralui.tab.js';
import { IntegralUIAnimationType, IntegralUITheme } from '../../integralui/components/integralui.enums.js';
//
// TabStrip settings
//
const tabstrip = document.querySelector('#tabstrip-addremove');
tabstrip.animation = IntegralUIAnimationType.Fade;
tabstrip.size = { height: 300 };
// Add Button
const btnAdd = document.querySelector('#add');
btnAdd.addEventListener("click", (e) => onAddClicked(e));
let onAddClicked = function(e){
let newTab = createNewTab();
let ctrlTab = createNewTabComponent(newTab);
ctrl.appendChild(ctrlTab);
ctrl.selectedTab = newTab;
updateContent();
}
//
// Create Tabs Methods
//
let createNewTab = function(){
// Create a new tab object
return {
id: ctrl.tabs.length + 1,
text: "Tab " + (ctrl.tabs.length + 1).toString()
}
}
let createNewTabComponent = function(tab){
// Create a new IntegralUI Tab Component
let ctrlTab = document.createElement('iui-tab', { is: IntegralUITab });
// Tab Header
ctrlTab.data = tab;
ctrlTab.text = tab.text;
// Tab Content
let tabContent = document.createElement('div');
tabContent.classList.add('tbs-addremove-tab-content');
tabContent.textContent = "Content of " + tab.text;
ctrlTab.appendChild(tabContent);
return ctrlTab;
}
</script>
</html>
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:
<html>
<head>
<link rel="stylesheet" href="./tabstrip-addremove.css" />
</head>
<body>
<div class="sample-block">
<div id="tabstrip-addremove">
<iui-tabstrip id="tabstrip-addremove"
resource-path="../../integralui/icons"
></iui-tabstrip>
</div>
<div class="empty-block">TabStrip is empty.</div>
<div class="tabstrip-addremove-panel">
<!-- . . . -->
<iui-button id="insert-after">Insert After</iui-button>
<iui-button id="insert-before">Insert Before</iui-button>
<div class="inline-block">
<iui-button id="insert-at">Insert At</iui-button><iui-numeric id="insert-pos" min="0" max="100"></iui-numeric>
</div>
</div>
</div>
</body>
<!-- . . . -->
<script type="module" src="../../integralui/components/integralui.numeric.js"></script>
<script type="module">
// . . .
// Insert After Button
const btnAfterBefore = document.querySelector('#insert-after');
btnAfterBefore.addEventListener("click", (e) => onInsertAfterClicked(e));
let onInsertAfterClicked = function(e){
if (ctrl.selectedIndex < 0)
onAddClicked(e);
else {
let newTab = createNewTab();
let ctrlTab = createNewTabComponent(newTab);
const tabElems = ctrl.querySelectorAll('iui-tab');
tabElems[ctrl.selectedIndex].after(ctrlTab);
ctrl.selectedTab = newTab;
updateContent();
}
}
// Insert Before Button
const btnInsertBefore = document.querySelector('#insert-before');
btnInsertBefore.addEventListener("click", (e) => onInsertBeforeClicked(e));
let onInsertBeforeClicked = function(e){
if (ctrl.selectedIndex < 0)
onAddClicked(e);
else {
let newTab = createNewTab();
let ctrlTab = createNewTabComponent(newTab);
const tabElems = ctrl.querySelectorAll('iui-tab');
tabElems[ctrl.selectedIndex].before(ctrlTab);
ctrl.selectedTab = newTab;
updateContent();
}
}
// Insert At Button
const btnInsertAt = document.querySelector('#insert-at');
btnInsertAt.addEventListener("click", (e) => onInsertAtClicked(e));
btnInsertAt.size = { width: 90 }
let onInsertAtClicked = function(e){
if (numInsertAt.value >= ctrl.tabs.length)
onAddClicked(e);
else if (numInsertAt.value >= 0 && numInsertAt.value < ctrl.tabs.length){
let newTab = createNewTab();
let ctrlTab = createNewTabComponent(newTab);
const tabElems = ctrl.querySelectorAll('iui-tab');
tabElems[numInsertAt.value].before(ctrlTab);
ctrl.selectedTab = newTab;
updateContent();
}
}
const numInsertAt = document.querySelector('#insert-pos');
numInsertAt.resourcePath = currentResourcePath;
numInsertAt.value = 0;
numInsertAt.size = { width: 90 }
numInsertAt.theme = IntegralUITheme.Office;
</script>
</html>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
<html>
<head>
<link rel="stylesheet" href="./tabstrip-addremove.css" />
</head>
<body>
<div class="sample-block">
<div id="tabstrip-addremove">
<iui-tabstrip id="tabstrip-addremove"
resource-path="../../integralui/icons"
></iui-tabstrip>
</div>
<div class="empty-block">TabStrip is empty.</div>
<div class="tabstrip-addremove-panel">
<!-- . . . -->
<iui-button id="remove">Remove</iui-button>
<div class="inline-block">
<iui-button id="remove-at">Remove At</iui-button><iui-numeric id="remove-pos" min="0" max="100"></iui-numeric>
</div>
<iui-button id="clear">Clear</iui-button>
</div>
</div>
</body>
<!-- . . . -->
<script type="module">
// . . .
// Remove Button
const btnRemove = document.querySelector('#remove');
btnRemove.addEventListener("click", (e) => onRemoveClicked(e));
let onRemoveClicked = function(e){
if (ctrl.selectedIndex >= 0){
const tabElems = ctrl.querySelectorAll('iui-tab');
tabElems[ctrl.selectedIndex].remove();
ctrl.selectedTab = ctrl.selectedIndex > 0 ? ctrl.tabs[ctrl.selectedIndex - 1] : null;
updateContent();
}
}
// Remove At Button
const btnRemoveAt = document.querySelector('#remove-at');
btnRemoveAt.addEventListener("click", (e) => onRemoveAtClicked(e));
btnRemoveAt.size = { width: 90 }
let onRemoveAtClicked = function(e){
if (numRemoveAt.value >= ctrl.tabs.length)
onRemoveClicked(e);
else if (numRemoveAt.value >= 0 && numRemoveAt.value < ctrl.tabs.length){
const tabElems = ctrl.querySelectorAll('iui-tab');
tabElems[numRemoveAt.value].remove();
ctrl.selectedTab = numRemoveAt.value > 0 ? ctrl.tabs[numRemoveAt.value - 1] : null;
updateContent();
}
}
const numRemoveAt = document.querySelector('#remove-pos');
numRemoveAt.resourcePath = currentResourcePath;
numRemoveAt.value = 0;
numRemoveAt.size = { width: 90 }
numRemoveAt.theme = IntegralUITheme.Office;
// Clear Button
const btnClear = document.querySelector('#clear');
btnClear.addEventListener("click", (e) => onClearClicked(e));
let onClearClicked = function(e){
const tabElems = ctrl.querySelectorAll('iui-tab');
tabElems.forEach(elem => elem.remove());
ctrl.selectedTab = null;
updateContent();
}
</script>
</html>
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.