LIDOR SYSTEMS

Advanced User Interface Controls and Components

IntegralUI Web

Native Angular 4 and AngularJS UI Components


TabStrip / Open New Tab

{{tab.text}}
{{tab.name}} Content

An example on how to open a new tab by using the last tab as an add button. Whenever the add tab is clicked, a new tab will be created and added at last position.

<!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" before-select="onBeforeSelect(e)">

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

<iui-tab-header>

<span class="icons {{tab.icon}}" ng-show="tab.icon != undefined"></span>

<span>{{tab.text}}</span>

</iui-tab-header>

<div class="tab-content">

{{tab.name}} Content

</div>

</iui-tab>

</iui-tabstrip>

</div>

</body>

</html>

angular

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

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

$scope.ctrlName = "ctrlSample";

 

$scope.tabs = [

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

{ name: 'empty', icon: 'new-tab' }

];

 

var tabCount = $scope.tabs.length - 1;

 

var getCurrentSelection = function(){

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

}

 

var createNewTab = function(){

tabCount++;

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

}

 

$scope.onBeforeSelect = function(e){

if (e.tab && e.tab.name == 'empty'){

var newTab = createNewTab();

$ctrlService.insertTabBefore($scope.ctrlName, newTab, e.tab);

$ctrlService.selectedTab($scope.ctrlName, newTab);

 

return false;

}

}

}]);

.directive

{

height: 300px;

}

.new-tab

{

background-position: -208px -80px;

margin: 0 0 0 4px;

}

.tab-content

{

padding: 30% 10px;

text-align: center;

}