LIDOR SYSTEMS

Advanced User Interface Controls and Components

IntegralUI Web

Native Angular 4 and AngularJS UI Components


Accordion / Icons

{{group.text}}

{{group.body}}



In this sample you can show/hide icons for groups in Accordion directive. Icons are fully customizable and can be placed in any location within the group header. In our example icons are placed on the right side.

This example also shows an expand box on the left side of group header, this is also an icon used to represent the state of the group: expanded or collapsed.

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

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

<iui-accordion-header>

<span class="box" ng-class="group.selected == false ? 'expand' : 'collapse'" ng-show="showExpandBox"></span>

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

<span class="group-icon icons-medium {{group.icon}}" ng-show="showIcons"></span>

</iui-accordion-header>

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

</iui-accordion-group>

</iui-accordion>

</div>

</body>

</html>

angular

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

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

$scope.ctrlName = "ctrlSample";

$scope.groups = [

{

name: 'group1',

icon: 'library',

text: 'Books',

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: 'group2',

icon: 'album',

text: 'Music',

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: 'group3',

icon: 'star-empty',

text: 'Favorites',

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

}

];

 

$scope.showExpandBox = true;

$scope.showIcons = true;

 

$scope.toggleExpandBox = function(){

$scope.showExpandBox = !$scope.showExpandBox;

}

 

$scope.toggleIcons = function(){

$scope.showIcons = !$scope.showIcons;

}

});

.box

{

background-image: url(../../../resources/icons.png);

background-repeat: no-repeat;

display: inline-block;

overflow: hidden;

padding: 0;

margin: 0 1px 2px 0;

width: 16px;

height: 16px;

vertical-align: middle;

}

.expand

{

background-position: -80px 0;

}

.collapse

{

background-position: -224px -80px;

}

.custom-content

{

margin: 0;

padding: 5px;

height: 150px;

}

.group-icon

{

position: absolute;

top: 4px;

right: 4px;

}

input

{

margin: 5px 0;

}