Advanced User Interface Controls and Components
Created: 15 January 2016
TabStrip directive for AngularJS displays a set of tabs aligned in one line, horizontally or vertically. when we have many tabs to display, a navigation buttons will appear so that you can scroll among them. In this case, maybe it would be better if we could divide tabs in different sets, so that only a specific tab set is shown as required
Similar: TabStrip Component for Angular 2
In following sections of this article, we will show you how to add a combo box to the tab strip and depending on currently selected option different tabs will appear, while still using the same TabStrip.
The demo shows a combo box with three options. The first options displays three tabs, second options displays two tabs and the last options will display four tabs.
In order to add a combo box to the tab strip, we will use the first tab header. We are using the IntegralUI ComboBox directive with little modification so that will appear borderless. In addition, the tab header appears transparent so that the combo box appear like is added to the tab strip.
In beginning, we only need to add a single tab to our TabStrip, which will contain the combo box in its header. Other tabs are added on demand, depending on currently selected option.
angular
.module("appModule", ["integralui"])
.controller("appCtrl", ["$scope", "$timeout", "IntegralUITabStripService", "IntegralUIComboBoxService", function($scope, $timeout, $tabService, $comboService){
// Unique identifier for tabStrip directive
$scope.tabName = tabSample";
// Unique identifier for ComboBox directive
$scope.comboName = "comboSample";
// A list of options for combo box
$scope.data = [
{ id: 1, text: "Option 1" },
{ id: 2, text: "Option 2" },
{ id: 3, text: "Option 3" }
];
// Replace the default appearance of the combo box by creating custom style
// The style contains names of custom CSS classes for different state of the ComboBox
var comboTabStyle = {
header: {
normal: 'combo-tab-header',
selected: 'combo-tab-header',
hovered: 'combo-tab-header'
}
}
// A list of tabs that will be displayed in the TabStrip directive
$scope.tabs = [
{ id: 999, name: 'comboTab', style: comboTabStyle }
];
// Initially select the first tab set
$timeout(function(){
$comboService.selectedItem($scope.comboName, $scope.data[0]);
}, 1);
}]);
<iui-tabstrip name="{{tabName}}" class="directive" tabs="tabs">
<iui-tab ng-repeat="tab in tabs" name="{{tab.name}}">
<iui-tab-header>
<div ng-if="tab.id == 999">
<iui-combobox name="{{comboName}}" items="data" max-dropdown-items="3" dropdown-width="100"></iui-combobox>
</div>
</iui-tab-header>
</iui-tab>
</iui-tabstrip>
/* ComboBox Settings */
.iui-combobox
{
border: 0;
background: transparent;
width: 100px;
}
/* TabStrip Settings */
.tab-content
{
padding: 30% 10px;
text-align: center;
}
.combo-tab-header
{
border: 0;
background: transparent;
}
Now, we can create tab sets. We are using different arrays, first will have three tabs, second two tabs, and the last four tabs.
// List of three different tab sets
var tabs1 = [
{ id: 1, name: 'Tab1', text: 'Tab 1' },
{ id: 2, name: 'Tab2', text: 'Tab 2' },
{ id: 3, name: 'Tab3', text: 'Tab 3' }
];
var tabs2 = [
{ id: 4, name: 'Tab4', text: 'Tab 4' },
{ id: 5, name: 'Tab5', text: 'Tab 5' }
];
var tabs3 = [
{ id: 6, name: 'Tab6', text: 'Tab 6' },
{ id: 7, name: 'Tab7', text: 'Tab 7' },
{ id: 8, name: 'Tab8', text: 'Tab 8' },
{ id: 9, name: 'Tab9', text: 'Tab 9' }
];
In our example, we are using simple tabs, their header contains the tab title and the content a single lined text. However, you can change the content of each tab in the HTML specification using any custom elements.
Related: Dynamically Populate Tabs from JSON in AngularJS
By handling the selectedItemChanged event from ComboBox directive, we can determine which option is selected and accordingly update the TabStrip directive so that correct tab set is displayed.
// Depending on option selected, updates the current set of tabs displayed in the TabStrip directive
var updateTabs = function(tabId){
// Suspend the update of tab strip layout to increase performance
$tabService.suspendLayout($scope.tabName);
// Remove any selection from the tab strip
$tabService.clearSelection($scope.tabName);
var tabSet = null;
switch (tabId){
case 1:
tabSet = tabs1;
break;
case 2:
tabSet = tabs2;
break;
case 3:
tabSet = tabs3;
break;
}
// Replace the content of the tab list to a different one, while still keeping the first tab with a combo box active
$scope.tabs.splice.apply($scope.tabs, [1, $scope.tabs.length-1].concat(tabSet));
// Resume and update the tabstrip layout
$tabService.resumeLayout($scope.tabName);
// Make sure at least the first tab from the choosen tab set is selected
$timeout(function(){
$tabService.selectedTab($scope.tabName, $scope.tabs[1]);
}, 1);
}
// A handler for selectedItemChanged event fired from ComboBox
$scope.onSelChanged = function(e){
updateTabs(e.item.id);
}
Because we are using the same TabStrip to display multiple tab sets, while still holding the combo box in the first tab, the HTML specification is set as:
<iui-tabstrip name="{{tabName}}" class="directive" tabs="tabs">
<iui-tab ng-repeat="tab in tabs" name="{{tab.name}}">
<iui-tab-header>
<div ng-if="tab.id == 999">
<iui-combobox name="{{comboName}}" items="data" max-dropdown-items="3" dropdown-width="100" selected-item-changed="onSelChanged(e)"></iui-combobox>
</div>
<div ng-if="tab.id != 999">
{{tab.text}}
</div>
</iui-tab-header>
<div class="tab-content">
{{tab.name}} Content
</div>
</iui-tab>
</iui-tabstrip>
In this way, using the ng-if directive and tab id, we can determine how to display tab headers. If the value of tab id is 999, the combo box appears, for other tabs their title is shown.
By adding a combo box to Angular TabStrip directive, we can divide the tab set to smaller tab sets. Depending on which option is currently selected, the TabStrip will show a different tab set. This further more excludes the need to use navigation, and only the most required tabs with their content is shown at one time.