https://github.com/mfbx9da4/angular-slideout
Mobile friendly, animated, reusable angular.js slideout directive.
https://github.com/mfbx9da4/angular-slideout
Last synced: about 1 month ago
JSON representation
Mobile friendly, animated, reusable angular.js slideout directive.
- Host: GitHub
- URL: https://github.com/mfbx9da4/angular-slideout
- Owner: mfbx9da4
- Created: 2015-03-20T21:12:13.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2016-04-08T17:28:16.000Z (about 9 years ago)
- Last Synced: 2025-03-28T13:21:16.196Z (about 2 months ago)
- Language: JavaScript
- Homepage: http://mfbx9da4.github.io/projects/angular-slideout
- Size: 27.3 KB
- Stars: 10
- Watchers: 2
- Forks: 1
- Open Issues: 4
-
Metadata Files:
- Readme: Readme.md
Awesome Lists containing this project
README
# Angularjs Slideout
Lightweight angular slideout directive for mobile which does not require angular-animate.js
### [Demo](http://mfbx9da4.github.io/projects/angular-slideout)
### 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.
```js
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.
```html
// import angular-slideout
var app = angular.module('app', ['angular-slideout', 'ngTouch']);
app.controller('main', function($scope) {});
```
### Usage
#### Configure your sidebar content
```html
Menu content
```
* **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
```html
```
####Configure swipe toggles (requires angular-touch)
```html
...
```