LIDOR SYSTEMS

Advanced User Interface Controls and Components

Tabs Orientation in AngularJS TabStrip Directive

Created: 03 December 2015

By default, tabs are positioned on top side in TabStrip directive for AngularJS. However, there is an option to change tab position so that you can place them on left, right or bottom side.

Similar: TabStrip Component for Angular 2

{{tab.body}}

TabStrip directive is part of IntegralUI Studio for Web
a suite of UI Components for development of web apps






As above demo shows, by selecting an option from right panel, you can choose tab orientation. Tabs are orientated horizontally (top or bottom side) or vertically (left or right side).

TabStrip Placement

In order to change orientation of tabs, we are using the built-in tabstripPlacement property of TabStrip directive. This property can accept one of the following values:

  • 'top' - tabs appear on top side
  • 'right' - tabs appear on right side
  • 'bottom' - tabs appear on bottom side
  • 'left' - tabs appear on left side

angular

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

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

$scope.ctrlName = ctrlSample";

$scope.placement = 'top';

 

$scope.tabs = [

{

name: 'tab1',

text: 'Tab 1',

body: 'Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris. Integer in mauris eu nibh euismod gravida. Duis ac tellus et risus vulputate vehicula. Donec lobortis risus a elit. Etiam tempor.'

},

{

name: 'tab2',

text: 'Tab 2',

body: 'Pellentesque malesuada nulla a mi. Duis sapien sem, aliquet nec, commodo eget, consequat quis, neque. Aliquam faucibus, elit ut dictum aliquet, felis nisl adipiscing sapien, sed malesuada diam lacus eget erat. Cras mollis scelerisque nunc. Nullam arcu. Aliquam consequat.'

},

{

name: 'tab3',

text: 'Tab 3',

body: 'Fusce convallis, mauris imperdiet gravida bibendum, nisl turpis suscipit mauris, sed placerat ipsum urna sed risus. In convallis tellus a mauris. Curabitur non elit ut libero tristique sodales. Mauris a lacus. Donec mattis semper leo. In hac habitasse platea dictumst.'

}

];

}]);

<!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" tabstrip-placement="{{placement}}">

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

<p class="custom-content">{{tab.body}}</p>

</iui-tab>

</iui-tabstrip>

</div>

</body>

</html>

Horizontal Tabs on Top or Bottom Side

In horizontal orientation, tabs are positioned on top or bottom side. When tabs are positioned on top side, their content panel is placed below the tab header. And vice versa, when tabs are positioned on bottom side, their content panel is placed above the tab header.

By default, tabs are arranged in left-to-right layout. Meaning, new tabs are added on the right after the last visible tab. You can change this by setting the rtl property to true, which will arrange tabs in right-to-left layout.

Vertical Tabs on Left or Right Side

There is an option also to position tabs to appear vertically, on left or right side. In this case, when tabs are displayed on the left side, their content panel is shown on right after the tab header.

Note When there is no space to show all present tabs, a navigation panel will appear with command buttons that allow you to slide among tabs or close the currently selected tab.

Conclusion

To change tab orientation in Angular TabStrip directive is simple. By changing the value of tabstripPlacement property, you can position tabs to appear horizontally on top or bottom side and vertically on left or right side. Furthermore, right-to-left layout (rtl) is supported, which allows you to arrange tabs to appear from right to left, or from bottom up, depending on current tab orientation.

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.