angular-slideout
v1.0.1
Published
Lightweight angular slideout directive for mobile which does not require angular-animate.js
Downloads
6
Readme
Angularjs Slideout
Lightweight angular slideout directive for mobile which does not require angular-animate.js
Demo
Dependencies
- angular
- Optional dependency of angular touch for swiping menu away
Install
If you are using npm or webpack
npm install --save angular-slideout
Import angular-slideout after angular and require it as a module to your app.
var angular_slideout = require('angular-slideout');
var app = angular.module('app', ['angular-slideout', 'ngTouch']);
app.controller('main', function($scope) {});
Otherwise import slideout.min.js
as so.
<!-- Angular -->
<script src="http://code.angularjs.org/1.2.19/angular.min.js"></script>
<!-- Angular touch (not required) -->
<script src="http://code.angularjs.org/1.2.19/angular-touch.min.js"></script>
<!-- Slideout module -->
<script src="slideout.min.js"></script>
<!-- Your App Code -->
<script>
// import angular-slideout
var app = angular.module('app', ['angular-slideout', 'ngTouch']);
app.controller('main', function($scope) {});
</script>
Usage
Configure your sidebar content
<nav slideout="show_menu" slideout-direction="from-left">
<div class="back-button" ng-click="show_menu = false;">Back</div>
<h2>Menu content</h2>
</nav>
- The slideout attribute: Use a boolean variable to determine whether to show slideout.
- The slideout direction: Options are 'from-left' or 'from-right'
####Configure sidebar toggles
<div class="show-sidebar" ng-click="show_menu = true;">
Show sidebar
</div>
####Configure swipe toggles (requires angular-touch)
<div class="container"
ng-swipe-left="show_menu = true"
ng-swipe-right="show_menu = false; show_sub_menu = false;">
...
</div>