Advanced User Interface Controls and Components
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;
}