danielepiccone / Ng Pageslide
AngularJS sliding panel for serving additional content from off the page
Stars: ✭ 464
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Ng Pageslide
react-native-panel
A Customizable React Native Panel for Android and iOS
Stars: ✭ 35 (-92.46%)
Mutual labels: slide, panel
Bigslide.js
⚠️**DEPRECATED**⚠️ A tiny slide panel navigation jQuery plugin with big dreams
Stars: ✭ 415 (-10.56%)
Mutual labels: slide
Gossip
An online user interface to efficiently author and delivery awesome and informative presentation. 🚀
Stars: ✭ 315 (-32.11%)
Mutual labels: slide
Slidablelayout
SlidableLayout is devoted to build a stable, easy-to-use and smooth sliding layout.
Stars: ✭ 385 (-17.03%)
Mutual labels: slide
Swipedelmenulayout
The most simple SwipeMenu in the history, 0 coupling, support any ViewGroup. Step integration swipe (delete) menu, high imitation QQ, iOS. ~史上最简单侧滑菜单,0耦合,支持任意ViewGroup。一步集成侧滑(删除)菜单,高仿QQ、IOS。~
Stars: ✭ 3,376 (+627.59%)
Mutual labels: slide
Toolbarpanel
Toolbar that can be slided down to show a panel
Stars: ✭ 397 (-14.44%)
Mutual labels: panel
Holoviz
High-level tools to simplify visualization in Python.
Stars: ✭ 452 (-2.59%)
Mutual labels: panel
Angular Playground
A drop in app module for working on Angular components in isolation (Angular version 2.x and above).
Stars: ✭ 414 (-10.78%)
Mutual labels: angular-directives
Xamarin.forms.inputkit
CheckBox, Radio Button, Labeled Slider, Dropdowns etc.
Stars: ✭ 372 (-19.83%)
Mutual labels: slide
Angular Tooltips
Angularjs tooltips module, add tooltips to your elements - https://720kb.github.io/angular-tooltips
Stars: ✭ 357 (-23.06%)
Mutual labels: angular-directives
Espui
A simple web user interface library for ESP32 and ESP8266
Stars: ✭ 330 (-28.88%)
Mutual labels: slide
Linearmodels
Add linear models including instrumental variable and panel data models that are missing from statsmodels.
Stars: ✭ 406 (-12.5%)
Mutual labels: panel
Hacker Slides
A small UI for building presentation slides from markdown markup
Stars: ✭ 316 (-31.9%)
Mutual labels: slide
Rn Swipeable Panel
Zero dependency swipeable bottom panel for React Native 📱
Stars: ✭ 415 (-10.56%)
Mutual labels: panel
Pytorch Tutorials Examples And Books
PyTorch1.x tutorials, examples and some books I found 【不定期更新】整理的PyTorch 1.x 最新版教程、例子和书籍
Stars: ✭ 346 (-25.43%)
Mutual labels: slide
Drawer Behavior
Drawer behavior is a library that provide an extra behavior on drawer, such as, move view or scaling view's height while drawer on slide.
Stars: ✭ 394 (-15.09%)
Mutual labels: slide
Pympress
Pympress is a simple yet powerful PDF reader designed for dual-screen presentations
Stars: ✭ 450 (-3.02%)
Mutual labels: slide
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
Examples in the repository, run them with npm run examples
Usage
Use within your Angular app
npm install --save angular-pageslide-directive
var app = angular.module("app", ["pageslide-directive"]);
Just use the <pageslide>
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 <div>
to wrap your content in
<div ... ng-controller="yourCtrl">
...
<pageslide ps-open="checked">
<div>
<p>some random content...</p>
</div>
</pageslide>
...
</div>
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: <div id='myDiv'/> -> 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
Author
2013, Daniele Piccone www.danielepiccone.com
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].