https://github.com/danielepiccone/ng-pageslide
AngularJS sliding panel for serving additional content from off the page
https://github.com/danielepiccone/ng-pageslide
angular angular-directives panel slide
Last synced: about 2 months ago
JSON representation
AngularJS sliding panel for serving additional content from off the page
- Host: GitHub
- URL: https://github.com/danielepiccone/ng-pageslide
- Owner: danielepiccone
- Created: 2013-07-21T15:06:00.000Z (almost 12 years ago)
- Default Branch: master
- Last Pushed: 2019-11-19T15:49:55.000Z (over 5 years ago)
- Last Synced: 2025-05-08T04:58:04.463Z (about 2 months ago)
- Topics: angular, angular-directives, panel, slide
- Language: JavaScript
- Homepage: http://danielepiccone.github.io/ng-pageslide/examples/
- Size: 732 KB
- Stars: 450
- Watchers: 26
- Forks: 160
- Open Issues: 15
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# AngularJS Pageslide Directive
An AngularJS directive which slides another panel over your browser to reveal an additional interaction pane.
It does all the css manipulation needed to position your content off canvas.
See it in action [HERE](http://danielepiccone.github.io/ng-pageslide/examples/)
Examples in the repository, run them with `npm run examples`
[](https://travis-ci.org/danielepiccone/ng-pageslide)
[](https://coveralls.io/github/danielepiccone/ng-pageslide?branch=v2)
## Usage
Use within your Angular app
`npm install --save angular-pageslide-directive`
`var app = angular.module("app", ["pageslide-directive"]);`
Just use the `````` element or attribute inside a controller scope like this:
please note that you need an outer controller to define the scope of your **checked** model
also you need an inner ```
``` to wrap your content in
```
...
some random content...
...
```
### Options:
```
pageslide (required)
// Configuration
ps-side (optional) = Where the panel should appear (right,left,top,bottom), if empty defaults to "right"
ps-container (optional) = custom CSS ID selector to which the slider div appends (e.g:
-> ps-container="myDiv")
ps-body-class (optional) = if true adds a class on the container body reflecting the state of the pageslide
// Interaction
ps-open (optional) = Boolean true/false used to open and close the panel (optional)
ps-auto-close (optional) = true if you want the panel to close on location change
ps-key-listener (optional) = close the sidebar with the ESC key (defaults to false)
ps-click-outside (optional) = close the sidebar by clicking outside (defaults to true)
ps-push (optional) = push the main body to show the panel (defaults to false)
// Style
ps-class (optional) = The class for the pageslide (default: "ng-pageslide")
ps-speed (optional) = The speed of the transition (optional)
ps-size (optional) = desired height/width of panel (defaults to 300px)
ps-zindex (optional) = desired z-index (defaults to 1000)
```
## Licensing
Licensed under [MIT](http://opensource.org/licenses/MIT)
## Author
2013, Daniele Piccone [www.danielepiccone.com](http://www.danielepiccone.com)