LIDOR SYSTEMS

Advanced User Interface Controls and Components

IntegralUI Web

Native Angular 4 and AngularJS UI Components


Menu / Icons



This sample shows how to show/hide icons in Menu directive. By clicking on check box on the right, you can change the built-in property:

  • showIcons - determines whether menu items are displayed with an icon

By default whenever root menu item is hovered, the submenu appear when menu is clicked. By setting the openOnHover property to true, the submenus will pop-up when mouse cursor hovers over the root menu longer than 500ms.

<!DOCTYPE html>

<html>

<head>

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

</head>

<body>

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

<iui-menu name="{{menuName}}" items="data" item-icon="defaultIcon" show-icons="showIcons" open-on-hover="true"></iui-menu>

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

</div>

</body>

</html>

angular

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

.controller("appCtrl", ["$scope", "IntegralUIMenuService", "$timeout", function($scope, $menuService, $timeout){

$scope.menuName = "menuSample";

$scope.defaultIcon = 'icons-medium empty';

$scope.showIcons = true;

$scope.data = [];

 

var flatList = [

{ "id": 1, "text": "File", "icon": "" },

{ "id": 11, "pid": 1, "text": "New", "icon": "icons-medium new-document" },

{ "id": 111, "pid": 11, "text": "Project", "icon": "" },

{ "id": 112, "pid": 11, "text": "Window", "icon": "" },

{ "id": 12, "pid": 1, "text": "Open" },

{ "id": 13, "pid": 1, "text": "Save As...", "icon": "icons-medium save" },

{ "id": 14, "pid": 1, "text": "Save All" },

{ "id": 15, "pid": 1, "type": "separator" },

{ "id": 16, "pid": 1, "text": "Page Setup" },

{ "id": 17, "pid": 1, "text": "Print", "icon": "icons-medium print" },

{ "id": 18, "pid": 1, "type": "separator" },

{ "id": 19, "pid": 1, "text": "Exit" },

{ "id": 2, "text": "Edit", "icon": "" },

{ "id": 21, "pid": 2, "text": "Undo" },

{ "id": 22, "pid": 2, "text": "Redo" },

{ "id": 23, "pid": 2, "type": "separator" },

{ "id": 24, "pid": 2, "text": "Cut" },

{ "id": 25, "pid": 2, "text": "Copy", "icon": "icons-medium copy" },

{ "id": 26, "pid": 2, "text": "Paste" },

{ "id": 27, "pid": 2, "text": "Delete", "icon": "icons-medium delete-document" },

{ "id": 3, "text": "View", "icon": "" },

{ "id": 31, "pid": 3, "text": "Print Layout" },

{ "id": 32, "pid": 3, "text": "Zoom", "icon": "icons-medium zoom" },

{ "id": 321, "pid": 32, "text": "Zoom In", "icon": "icons-medium zoom-in" },

{ "id": 322, "pid": 32, "text": "Zoom Out", "icon": "icons-medium zoom-out" },

{ "id": 323, "pid": 32, "type": "separator" },

{ "id": 324, "pid": 32, "text": "Restore" },

{ "id": 33, "pid": 3, "type": "separator" },

{ "id": 34, "pid": 3, "text": "Full Screen" },

{ "id": 4, "text": "Help", "icon": "" },

{ "id": 41, "pid": 4, "text": "Search", "icon": "" },

{ "id": 42, "pid": 4, "text": "Documents", "icon": "" },

{ "id": 43, "pid": 4, "type": "separator", "icon": "" },

{ "id": 44, "pid": 4, "text": "About", "icon": "" }

];

 

var initTimer = $timeout(function(){

$menuService.loadData($scope.menuName, flatList);

$menuService.updateLayout($scope.menuName);

}, 1);

 

$scope.toggleIcons = function(){

$scope.showIcons = !$scope.showIcons;

}

}]);

.iui-menu

{

width: 500px;

}

.icons-medium

{

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

background-repeat: no-repeat;

display: inline-block;

margin: 0 1px;

overflow: hidden;

padding: 0 !important;

width: 24px;

height: 24px;

vertical-align: middle;

}

.iui-menu-item-root-content

{

width: 50px;

text-align: center;

}

.iui-menu-item

{

width: 125px;

}

.iui-menu-item-content

{

margin: 0 7px;

}