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>
