CODEWITHSUNDEEP
javascriptangularjsms-officeoffice-jsoffice-ui-fabric
SoftTimur
SoftTimur

Reputation: 5510

Automatically open a menu when we hover the icon (ng-office-ui-fabric)

I want to use office-ui-fabric with angularjs, so I am trying to use ng-office-ui-fabric.

To make a command bar, I have found this example. However, there is a problem about a dropdown button (eg, 14th). When I click on 14th or its icon, the menu is not opened. Is it normal?

Additionally, what I want to achieve is actually: when we hover its icon, the menu is open.

Does anyone know how to do this?

PS: a JSBin where clicking on 14th does not open the menu (Chrome, mac).

Upvotes: 1

Views: 1038

Answers (2)

Vivz
Vivz

Reputation: 6620

You can do the following, on hover set a flag to true on leaving set that flag to false.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body ng-app="">

<div ng-mouseleave="val = false" ng-mouseover="val = true" ng-init="val=false">Mouse over me!</div>
<span ng-show="val"> This is being displayed on mouseover</span>


</body>
</html>

UPDATE:

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
  <link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/2.6.3/css/fabric.min.css" />
  <link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/2.6.3/css/fabric.components.min.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/ngOfficeUiFabric/0.15.3/ngOfficeUiFabric.min.js"></script>
</head>
<body ng-app="YourApp"> 
  <div ng-controller="YourController">

          
      
  <a href ng-click="toggleMenu()">14</a>
      <uif-contextual-menu uif-is-open="dynamic.opened">
        <uif-contextual-menu-item uif-text="'New'"></uif-contextual-menu-item>
        <uif-contextual-menu-item uif-text="'Edit'"></uif-contextual-menu-item>
        <uif-contextual-menu-item uif-text="'Delete'"></uif-contextual-menu-item>
        <uif-contextual-menu-item uif-type="divider"></uif-contextual-menu-item>
        <uif-contextual-menu-item uif-text="'Settings'"></uif-contextual-menu-item>
      </uif-contextual-menu>

  </div>
 
  <script type="text/javascript"> 
    angular.module('YourApp', ['officeuifabric.core', 'officeuifabric.components'])
    .controller('YourController', function ($scope) {      $scope.isOpen = true;
      $scope.dynamic = {};
      $scope.dynamic.opened = false;
      $scope.toggleMenu = function () {
        $scope.dynamic.opened = !$scope.dynamic.opened;
      };});
  </script> 
 
</body>
</html>

Upvotes: 0

Svidlak
Svidlak

Reputation: 88

you can use on-mouseover='over()' for hover effects, also write the over() method. About the 14th not opening - not sure, but it works for me (google chrome win10)

Upvotes: 2

Related Questions