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>