❤
npm
Sign UpSign In

This package has been deprecated

Author message:

angular-sidebarjs is no longer maintained

angular-sidebarjs

5.1.0 • Public • Published

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>

Readme

Keywords

Package Sidebar

Install

npm i angular-sidebarjs

Repository

github.com/SidebarJS/angular-sidebarjs

Homepage

github.com/SidebarJS/angular-sidebarjs#readme

Weekly Downloads

71

Version

5.1.0

License

MIT

Unpacked Size

52.1 kB

Total Files

18

Last publish

Collaborators

  • lorenzodianni
Try on RunKit
Report malware