angular-sidebarjs

Create mobile sidebar/sidenav experiance in angularjs

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
angular-sidebarjs
2545.1.05 years ago6 years agoMinified + gzip package size for angular-sidebarjs in KB

Readme

Angular SidebarJS (AngularJS v1.x)
Create mobile sidebar/sidenav experiance in AngularJS.
Are you looking for a version with Angular? Try ng-sidebarjs

npm install angular-sidebarjs --save

Demo

Open the demo on your device and try the touch gestures!

Installation

Classic
<script src="your/path/angular-sidebarjs.js"></script>

Require
require('angular-sidebarjs');

ES6
import ngSidebarJS from 'angular-sidebarjs';

Options

<sidebarjs
  // Optional | Required only for multiple sidebarjs
  sidebarjs-name="mainSidebarJS"
  
  // Optional
  sidebarjs-config="{
      // Minimum swipe in px required to trigger listener: open
      documentMinSwipeX?: 10,
      // Range in px where document is listening for gesture: open
      documentSwipeRange?: 40,
      // Open and close sidebar with swipe gestures
      nativeSwipe?: true,
      // Enable/Disable open on swipe
      nativeSwipeOpen?: true,
      // Sidebar position, accepted values: left|right
      position?: 'left',
      // Backdrop opacity on sidebar open
      backdropOpacity?: 0.3,
  }"
  
  // Optional | Function called after sidebar is open
  on-close="$ctrl.onSidebarClose()"
  
  // Optional | Function called after sidebar is close
  on-open="$ctrl.onSidebarOpen()"
  
  // Optional | Function called when sidebar change visibility
  on-change-visibility="$ctrl.onSidebarChangeVisibility($event)">
</sidebarjs>

Implementation

Download files

Download and save all files
$ npm install angular-sidebarjs --save

Insert angular-sidebarjs.min.css and angular-sidebarjs.min.js in your index.html.
<head>

  <link rel="stylesheet" href="your/path/angular-sidebarjs.min.css">

</head>
<body>

  <script src="your/path/angular-sidebarjs.min.js"></script>

</body>

Inject ngSidebarJS

angular
  .module('DemoApp', [
    'ngSidebarJS'
  ])

Create SidebarJS element

Write sidebarjs tag and a trigger button with just sidebarjs-toggle attribute.
<body ng-app="DemoApp">

  <button sidebarjs-toggle>Open/Close</button>

  <sidebarjs>
    <div>Title</div>
    <nav>
      <a href="link">Home</a>
      <a href="link">About</a>
      <a href="link">Contacts</a>
    </nav>
  </sidebarjs>

</body>