LIDOR SYSTEMS

Advanced User Interface Controls and Components

IntegralUI Web

Native Angular 4 and AngularJS UI Components


TabStrip / Right To Left

{{tab.name}} Content










This sample shows how to set the TabStrip in right-to-left layout. All groups, their header and content, are displayed in right-to-left layout. By clicking on the checkbox in control panel on the right, you can switch back to the default left-to-right layout setting.

<!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" style="direction:{{tabAlignment}}" rtl="showRTL" tabstrip-placement="{{placement}}">

<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>

</body>

</html>

angular

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

.controller("appCtrl", function($scope){

$scope.ctrlName = "ctrlSample";

$scope.placement = 'top';

 

$scope.tabs = [

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

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

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

{ id: 4, name: 'Page4', text: 'Tab 4' },

{ id: 5, name: 'Page5', text: 'Tab 5' },

{ id: 6, name: 'Page6', text: 'Tab 6' },

{ id: 7, name: 'Page7', text: 'Tab 7' },

{ id: 8, name: 'Page8', text: 'Tab 8' },

{ id: 9, name: 'Page9', text: 'Tab 9' },

{ id: 10, name: 'Page10', text: 'Tab 10' },

{ id: 11, name: 'Page11', text: 'Tab 11' },

{ id: 12, name: 'Page12', text: 'Tab 12' },

];

 

$scope.showRTL = true;

$scope.tabAlignment = 'rtl';

 

$scope.toggleRTL = function(){

$scope.showRTL = !$scope.showRTL;

 

if ($scope.tabAlignment == 'rtl')

$scope.tabAlignment = 'ltr';

else

$scope.tabAlignment = 'rtl';

}

});

.directive

{

direction: rtl;

height: 300px;

}

.tab-content

{

padding: 25% 10px;

}