LIDOR SYSTEMS

Advanced User Interface Controls and Components

IntegralUI Web

Native Angular 4 and AngularJS UI Components


Accordion / Right To Left

{{group.name}} Content


This sample shows how to set the Accordion 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.accordion.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.accordion.min.js"></script>

</head>

<body>

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

<iui-accordion name="{{ctrlName}}" class="directive" groups="groups" style="direction:{{groupAlignment}}">

<iui-accordion-group ng-repeat="group in groups" name="{{group.name}}" heading="{{group.text}}">

<div class="group-content">

{{group.name}} Content

</div>

</iui-accordion-group>

</iui-accordion>

</div>

</body>

</html>

angular

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

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

$scope.ctrlName = "ctrlSample";

$scope.groups = [

{ id: 1, name: 'Group1', text: 'Header 1' },

{ id: 2, name: 'Group2', text: 'Header 2' },

{ id: 3, name: 'Group3', text: 'Header 3' }

];

 

$scope.groupAlignment = 'rtl';

 

$scope.toggleRTL = function(){

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

$scope.groupAlignment = 'ltr';

else

$scope.groupAlignment = 'rtl';

}

});

.directive

{

direction: rtl;

}

.group-content

{

padding: 25% 10px;

}