LIDOR SYSTEMS

Advanced User Interface Controls and Components

IntegralUI Web

Native Angular 4 and AngularJS UI Components


TreeView / Icons



In this sample you can show/hide icons for items in TreeView directive. By clicking on check box on the right, you can change the built-in properties:

  • showIcons - determines whether an icon is shown before the item title

There are two ways to apply an icon to an item:

  • By using CSS to set the class for item-icon attribute or variable of TreeView directive for all items, or
  • By using CSS to set the class for icon attribute or variable of specific item. For example:

    item.icon = 'icons heart';

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" href="css/integralui.css" />

<link rel="stylesheet" href="css/integralui.treeview.css" />

<link rel="stylesheet" href="css/themes/theme-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.lists.min.js"></script>

<script type="text/javascript" src="js/angular.integralui.treeview.min.js"></script>

</head>

<body>

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

<iui-treeview name="{{treeName}}" items="data" item-icon="itemIcon" show-icons="showIcons"></iui-treeview>

<label><input type="checkbox" ng-click="toggleIcons()" checked="checked" /> Show Icons</label><br />

</div>

</body>

</html>

angular

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

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

$scope.treeName = "treeSample";

$scope.itemIcon = "icons empty";

$scope.showIcons = true;

 

$scope.data = [

{

id: 1,

text: "Books",

icon: "icons books",

items: [

{ id: 11, pid: 1, text: "Art" },

{

id: 12,

pid: 1,

text: "Business",

icon: "icons business",

items: [

{ id: 121, pid: 12, text: "Economics" },

{

id: 122,

pid: 12,

text: "Investing",

expanded: false,

icon: "icons chart",

items: [

{ id: 1221, pid: 122, text: "Bonds" },

{ id: 1222, pid: 122, text: "Options" },

{ id: 1223, pid: 122, text: "Stocks" }

]

},

{ id: 123, pid: 12, text: "Management" },

{ id: 124, pid: 12, text: "Small Business" }

]

},

{ id: 13, pid: 1, text: "Health", icon: "icons health" },

{ id: 14, pid: 1, text: "Literature" },

{

id: 15,

pid: 1,

text: "Science",

expanded: false,

icon: "icons science",

items: [

{ id: 151, pid: 15, text: "Astronomy" },

{ id: 152, pid: 15, text: "Mathematics" },

{ id: 153, pid: 15, text: "Evolution" },

{ id: 154, pid: 15, text: "Nature" }

]

}

]

},

{ id: 2, text: "Computers" },

{

id: 3,

text: "Electronics",

expanded: false,

items: [

{ id: 31, pid: 3, text: "Camera" },

{ id: 32, pid: 3, text: "Cell Phones" },

{ id: 33, pid: 3, text: "Video Game Consoles" }

]

},

{

id: 4,

text: "Music",

expanded: false,

icon: "icons music",

items: [

{ id: 41, pid: 4, text: "Blues" },

{ id: 42, pid: 4, text: "Classic Rock" },

{ id: 43, pid: 4, text: "Pop" },

{ id: 44, pid: 4, text: "Jazz" }

]

},

{ id: 5, text: "Watches", icon: "icons time" }

];

 

$scope.toggleIcons = function(){

$scope.showIcons = !$scope.showIcons;

}

});

.icons

{

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

background-repeat: no-repeat;

display: inline-block;

overflow: hidden;

padding: 0;

margin: 0;

width: 16px;

height: 16px;

}

.books

{

background-position: -16px -64px;

}

.business

{

background-position: -192px -48px;

}

.chart

{

background-position: -96px -64px;

}

.health

{

background-position: -128px -48px;

}

.music

{

background-position: -32px -64px;

}