Native-like Menu Drawer For Angular App


Native-like menu, pull-to-sync, action button, in-app-toast notification and burger menu icon implementation for angular mobile/desktop apps fot Native-like Menu.

Native-like menu implementation for angular mobile apps. Build with hammer.js for touch support.

  • using hammer.js for better touch support.
  • fully animated burger menu icon
  • nice and smooth menu drawer (slide from left)
  • animated pull-to-refresh with callback
  • in-app-toast messages with true/false callback
  • three-dot-menu for secondary actions
  • animated action button
  • adjust content height
  • 13kB minified.

Why this?

If you are developing application for android with Phone-gap or Ionic or other alternative, this is exactly for you. No touch support or slow/no animations, if there was animations, they mostly have lags.

With nlFramework you have touch support, slide open/close/toggle menu, action button, pull-to-refresh, in app toast notification, three-dot-menu and all with smooth hardware accelerated animations.

The Ignite UI for Angular Navigation Drawer component is a side navigation container. It can rest above content and slide in/out of view or be pinned to expand/collapse within content.The Navigation Drawer features responsive mode selection and touch gestures. Content is completely customizable and can make use of default menu item styling.

Getting started

To start using nlFramework in your app include hammer.jsng-nlFramework-min.js and ng-nlFramework.css in your project:

<script src="hammer.js"></script>
<script src="ng-nlFramework-min.js"></script>
<link href="ng-nlFramework.css" rel="stylesheet">

nlFramework modules

Lets take a look at all the modules that nlFramework has.

$nlDrawer

To make this module work, first you need to insert element with #nlDrawer id.

<!-- body of the menu drawer -->
<div id="nlDrawer">
  Your menu content
</div>

then just pass options to $nlFramework.init() function which will initialize the drawer. You can listen to callback openCband closeCb.

var nlOptions = {
  drawer: {
    maxWidth: 300,
    openCb: function(){
      console.log('nlDrawer: openned')
    },
    closeCb: function(){
      console.log('nlDrawer closed')
    }
  }
}

And the work is done.

Here is what the module contains:

  • $nlDrawer
  • show(): shows the drawer (slide in)
  • hide(): hides the drawer (slide out)
  • toggle(): toggles the drawer (show/hide)
  • openned: returns true/false if the drawer is openned/closed

Optionally you can use #nlBurger (see $nlBurger) with #nlTopbar (see $nlTopbar).

$nlBurger

This simple module takes care of the burger menu icon animation.

var nlOptions = {
  burger: {
    use: true
  }
}

If You want, you can include burger HTML element in your code and assign custom action:

<div id="nlBurger" onclick="doSomething()">

  <div id="burger-top"></div>
  <div id="burger-center"></div>
  <div id="burger-bottom"></div>
</div>

Here is what $nlBurger can do:

$nlRefresh

Pull-to-refresh module. Is hidden behind #nlTopbar and waits for pulling to show itself.
For this module to work, pass options to $nlFramework.init(), which will initialize the module and adds *#nlTopbar and #nlRefresh to your code.

var nlOptions = {
  refresh: true
}

This will start the module and assign pull action to #nlTopbar.
To add custom callback assign some function to refresh.callback which by default just prints something in the console.

var nlOptions = {
  refresh: {
    defaultColor: '#aa3344', // default(inactive) color
    activeColor: '#558844', // active color
    callback: function(){
      // here is just timeout to wait 5sec before ending sync animation
      setTimeout( function(){
        console.log( 'nlRefresh custom callback' );
        // after doing some stuff end syncing animation
        $nlRefresh.syncEnd();
      }, 5000 );
    }
  }
}
For more Angular Plugins And Download Click


 

Leave a Reply

Your email address will not be published. Required fields are marked *