LIDOR SYSTEMS

Advanced User Interface Controls and Components

IntegralUI Web

Native Angular 4 and AngularJS UI Components


TabStrip / Add-Remove

{{tab.name}} Content






In this sample you can create and/or modify a TabStrip using several different methods:

  • addTab - adds a new tab
  • insertTabAfter - adds a new tab after specified tab (in this example the selected tab)
  • insertTabAt - adds a new tab at specified position
  • insertTabBefore - adds a new tab before specified tab (in this example the selected tab)
  • removeTab - removes a tab (in this sample the selected tab)
  • removeTabAt - removes a tab at specified position from parent collection
  • clearTabs - removes all tabs

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" href="css/integralui.tabstrip.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>

</head>

<body>

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

<iui-tabstrip name="{{ctrlName}}" class="directive" tabs="tabs" events="ctrlEvents" show-close-button="false">

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

<div class="tab-content">

{{tab.name}} Content

</div>

</iui-tab>

</iui-tabstrip>

<div>

<button ng-click="add()">Add</button><br />

<button ng-click="insertAfter()" ng-disabled="disableButtons">Insert After</button><br />

<button ng-click="insertBefore()" ng-disabled="disableButtons">Insert Before</button><br />

<div class="inline-block">

<button class="inline-button" ng-click="insertAt()">Insert At</button><input ng-model="insertPos" type="number" min="0" max="100" style="width:35px" />

</div>

<button ng-click="remove()" ng-disabled="disableButtons">Remove</button><br />

<div class="inline-block">

<button class="inline-button" ng-click="removeAt()" ng-disabled="disableButtons">Remove At</button><input ng-model="removePos" type="number" min="0" max="100" style="width:35px" /><br />

</div>

<button ng-click="clear()" ng-disabled="disableButtons">Clear</button>

</div>

</div>

</body>

</html>

angular

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

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

$scope.ctrlName = "ctrlSample";

$scope.insertPos = 0;

$scope.removePos = 0;

$scope.disableButtons = false;

$scope.tabs = [

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

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

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

];

 

var tabCount = $scope.tabs.length;

 

var getCurrentSelection = function(){

return $ctrlService.selectedTab($scope.ctrlName);

}

 

var createNewTab = function(){

tabCount++;

return { id: tabCount, name: "Tab" + tabCount, text: "Tab " + tabCount };

}

 

$scope.add = function(){

$ctrlService.addTab($scope.ctrlName, createNewTab());

}

 

$scope.insertAfter = function(){

$ctrlService.insertTabAfter($scope.ctrlName, createNewTab(), getCurrentSelection());

}

 

$scope.insertAt = function(){

$ctrlService.insertTabAt($scope.ctrlName, createNewTab(), $scope.insertPos);

}

 

$scope.insertBefore = function(){

$ctrlService.insertTabBefore($scope.ctrlName, createNewTab(), getCurrentSelection());

}

 

$scope.remove = function(){

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

}

 

$scope.removeAt = function(){

$ctrlService.removeTabAt($scope.ctrlName, $scope.removePos);

}

 

$scope.clear = function(){

$ctrlService.clearTabs($scope.ctrlName);

tabCount = 0;

}

 

$scope.onClear = function(e){

updateTabStripAppearance();

}

 

$scope.onTabAdded = function(e){

updateTabStripAppearance();

 

$ctrlService.selectedTab($scope.ctrlName, e.obj);

}

 

$scope.onTabRemoved = function(e){

updateTabStripAppearance();

}

 

var updateTabStripAppearance = function(){

var updateTimer = $timeout(function(){

if ($scope.tabs.length == 0){

$scope.ctrlBackground = 'white';

$scope.ctrlBorder = 'thin solid gray';

}

else {

$scope.ctrlBackground = 'transparent';

$scope.ctrlBorder = 'thin solid transparent';

}

 

$scope.disableButtons = $scope.tabs.length > 0 ? false : true;

 

$timeout.cancel(updateTimer);

}, 1);

}

 

$scope.ctrlEvents = {

clear: function(){

return $scope.onClear();

},

tabAdded: function(e){

return $scope.onTabAdded(e);

},

tabRemoved: function(e){

return $scope.onTabRemoved(e);

}

}

}]);

.directive

{

height: 300px;

}

button

{

margin: 5px 0;

width: 125px;

}

.inline-block

{

display: inline-block;

margin: 3px 0;

}

.inline-button

{

width: 85px;

margin-right: 3px;

}

.tab-content

{

padding: 30% 10px;

text-align: center;

}