angular-swing
AngularJS directive for Swing: A swipeable cards interface. The swipe-left/swipe-right for yes/no input. As seen in apps like Jelly and Tinder, and many others.
Give it a swing! and please tweet it if you like it. : )
Usage
Load angular-swing2
module, e.g.
; const MODULE_NAME = 'your-module';;angular;
Loading angular-swing2
module will make available the swing-stack
and swing-card
directives.
Prepare a Swing stack:
Add a Card to the Swing stack:
Attach event listeners to the instance of Card:
Use scope variable to change Swing Stack default options:
$scopeoptions = { console; return Math; } { console; return throwOutConfidence === 1; };
...
Use scope variables/methods to add/remove cards:
{{card.name}}
$scopecards = name: 'foo' name: 'bar';$scope { $scopecards;}$scope { $scopecards;};
Examples
- Card stack using AngularJS directive.
There are more examples that using the standalone Swing.
The code for all of the examples is in the ./examples/ folder.
Raise an issue if you are missing an example.
Events
Swing Documentation for the Events.
Swing events translate to the following attributes in the AngularJS directive:
Name | Description |
---|---|
throwout |
swing-on-throwout |
throwoutleft |
swing-on-throwoutleft |
throwoutright |
swing-on-throwoutright |
throwin |
swing-on-throwin |
dragstart |
swing-on-dragstart |
dragmove |
swing-on-dragmove |
dragend |
swing-on-dragend |
Event listener expression can use eventName
and eventObject
parameters.
Event Object
Swing Documentation for the Event Object.
Download
Using NPM:
npm install angular-swing2
You can of course wedge https://unpkg.com/angular-swing2/dist/angular-swing.js in a script src.