LIDOR SYSTEMS

Advanced User Interface Controls and Components

Custom Tab Header with Close Button in AngularJS

Created: 10 December 2015

Usually tabs in TabStrip directive displays only a title. By modifying the HTML of tab header, you can add custom content and arrange it in custom layout. In our example, we will show you how to add a checkbox and a close button to each tab header in tabstrip directive.

Similar: TabStrip Component for Angular 2

{{tab.text}}
{{tab.name}} Content
TabStrip directive is part of IntegralUI Studio for Web
a suite of UI Components for development of web apps

In our demo, each tab header along with its title also displays a checkbox on the left and a close button on the right. Whenever the close button is clicked, the tab is removed from the tabs collection of tabstrip directive.

Tabs with Close Button

To enhance the tab header with custom content, we will use the IntegralUI Tab Header directive. This directive can be used only within the TabStrip directive and allow us to override the default appearance and behavior of tab header with our own.

In our case, we will set tab header to contain a title and close button on the right. For title we are using the <span> element, and for close button a <div> element enclosing a element. Here how this looks like:

angular

.module("appModule", ["integralui"])

.controller("appCtrl", ["$scope", "IntegralUITabStripService", "$timeout", function($scope, $ctrlService, $timeout){

$scope.ctrlName = "ctrlSample";

$scope.checkName = "ctrlCheck";

 

$scope.tabs = [

{ id: 1, name: 'Tab1', text: 'Tab 1', checked: false },

{ id: 2, name: 'Tab2', text: 'Tab 2', checked: false },

{ id: 3, name: 'Tab3', text: 'Tab 3', checked: false }

];

}]);

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" href="css/integralui.tabstrip.css" />

<link rel="stylesheet" href="css/integralui.checkbox.css" />

<link rel="stylesheet" href="css/themes/theme-flat-blue.css" />

<script type="text/javascript" src="external/angular.min.js"></script>

<script type="text/javascript" src="js/angular.integralui.min.js"></script>

<script type="text/javascript" src="js/angular.integralui.tabstrip.min.js"></script>

<script type="text/javascript" src="js/angular.integralui.checkbox.min.js"></script>

</head>

<body>

<div ng-app="appModule" ng-controller="appCtrl">

<iui-tabstrip name="{{ctrlName}}" class="directive" tabs="tabs">

<iui-tab ng-repeat="tab in tabs" name="{{tab.name}}">

<iui-tab-header>

<span class="header-title">{{tab.text}}</span>

<div class="toolbar" ng-mousedown="$event.stopPropagation();">

<div class="header-button"><span class='icons delete' ng-click="onDelete(tab)"></span></div>

</div>

</iui-tab-header>

<div class="tab-content">

{{tab.name}} Content

</div>

</iui-tab>

</iui-tabstrip>

</div>

</body>

</html>

.iui-tabpage-header

{

padding-right: 2px;

}

.header-title

{

display: inline-block;

margin: 0 5px;

vertical-align: middle;

}

.tab-content

{

padding: 30% 10px;

text-align: center;

}

.icons

{

background-image: url(header-icons.png);

border: thin solid transparent;

display: block;

}

.delete

{

background-position: -17px 0;

}

.toolbar

{

display: inline-block;

margin: 0;

padding: 0;

vertical-align: middle;

}

.header-button

{

display: inline-block;

border: thin solid transparent;

margin: 0;

padding: 2px 2px 3px 2px;

}

.header-button:hover

{

background-color: white;

border-color: #969696;

}

The appearance of button is controlled by custom CSS styles, see above.

To handle the click event for the close button, we are using the ng-click attribute. Whenever this button is clicked, the corresponding tab is removed from tabs collection of the tabstrip directive.

$scope.onDelete = function(tab){

$ctrlService.removeTab($scope.ctrlName, tab);

}

Note During this event, the tab will also become selected. To prevent this, we are handling the mousedown event and suppressing the propagation of click event.

Add CheckBox to Tabs

In similar way as above, we are adding a checkbox to the tab header, placed on the left side. For a checkbox we are using the IntegralUI CheckBox directive, which comes with many features and it is fully customizable. There is no restriction, you can use any other checkbox directive or standard input element.

<iui-tabstrip name="{{ctrlName}}" class="directive" tabs="tabs">

<iui-tab ng-repeat="tab in tabs" name="{{tab.name}}">

<iui-tab-header>

<iui-checkbox name="{{checkName}}" checked="tab.checked" checked-changed="onCheckedChanged(e, tab)" ng-mousedown="$event.stopPropagation();"></iui-checkbox>

<span class="header-title">{{tab.text}}</span>

<div class="toolbar" ng-mousedown="$event.stopPropagation();">

<div class="header-button"><span class='icons delete' ng-click="onDelete(tab)"></span></div>

</div>

</iui-tab-header>

<div class="tab-content">

{{tab.name}} Content

</div>

</iui-tab>

</iui-tabstrip>

.iui-checkbox

{

display: inline-block;

margin-bottom: 3px;

vertical-align: middle;

}

Each tab has its own checkbox, which value is determined by the checked field of corresponding tab object. Whenever checkbox is clicked, this value also changes, and the checkedChanged event is fired. We can handle this event to add some custom functionality.

$scope.onCheckedChanged = function(e, tab){

alert("CheckBox value changed to " + tab.checked + " for the " + tab.text);

}

With above code, whenever the checkbox value changes, an alert window is shown with a message stating the tab and the value of the checkbox.

Conclusion

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

In our demo, we have created tabs with custom header, showing a checkbox and close button in it. Whenever these buttons are clicked, a different action takes place.

Did you Like this Article?


Enter your e-mail address below and you will receive latest articles as well as news on upcoming events and special offers.