LIDOR SYSTEMS

Advanced User Interface Controls and Components

IntegralUI Web

Native Angular 4 and AngularJS UI Components


Menu / Right To Left



This sample shows how to arrange all Menus in right-to-left layout. By clicking on check box on the right, you can change the built-in property:

  • rtl - determines whether menus are shown in left-to-right or right-to-left order

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" rtl="showRTL" open-on-hover="true"></iui-menu>

<label><input type="checkbox" ng-click="toggleRTL()" checked="checked" /> Right to Left</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.showRTL = 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.toggleRTL = function(){

$scope.showRTL = !$scope.showRTL;

}

}]);

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

}