angular-swing

1.0.0 • Public • Published

Swing

Build Status NPM version Bower version

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.

Card stack example.

Contents

Usage

Include ./dist/swing.js.

Prepare a Swing stack:

<ul swing-stack></ul>

Add a Card to the Swing stack:

<ul swing-stack>
    <li swing-card></li>
</ul>

Attach event listeners to the instance of Card:

<ul swing-stack>
    <li
        swing-card
        swing-on-throwout="console.log(eventName, eventObject)"
        swing-on-throwoutleft="console.log(eventName, eventObject)"
        swing-on-throwoutright="console.log(eventName, eventObject)"
        swing-on-throwin="console.log(eventName, eventObject)"
        swing-on-dragstart="console.log(eventName, eventObject)"
        swing-on-dragmove="console.log(eventName, eventObject)"
        swing-on-dragend="console.log(eventName, eventObject)"
        ></li>
</ul>

Usage Examples

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 Bower:

bower install angular-swing

Using NPM:

npm install angular-swing

Readme

Keywords

Package Sidebar

Install

npm i angular-swing

Weekly Downloads

75

Version

1.0.0

License

BSD-3-Clause

Last publish

Collaborators

  • marcelaraujo
  • gajus