Contextual Menu Demo | <uif-contextual-menu>

In order for this demo to work you must first build the library in debug mode.

Simple menu:

Code:

Multi level menu with rich item content:

Code:

Multiselection menu:

Code:

Open contextual menu by clicking on other element:

Code:

Need some animation? Here you go:

  1. Include angular-animate.js using script tag (<script src="https://code.angularjs.org/1.4.8/angular-animate.min.js"></script>) or include it into your package
  2. Add dependency on `ngAnimate` in your module, angular.module('demoApp', ['ngAnimate','officeuifabric.core','officeuifabric.components']);
  3. Now is-open-add, is-open-add-active, is-open-remove, is-open-remove-active css classes are availiable for you to use. They are automatically added by ngAnimate when menu opening and closing. You can use Office UI Fabric animation or external libraries like animate.css or even create your own animations.
  4. Here is an example of using Office UI Fabric animations:

Code: