vs

vue-swing

Vue.js wrapper for Swing

Showing:

Popularity

Downloads/wk

229

GitHub Stars

200

Maintenance

Last Commit

3yrs ago

Contributors

2

Package

Dependencies

0

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Vue Swipe

Readme

VueSwing

JavaScript Style Guide License: MIT

A Vue.js wrapper for Swing. Swing is a swipeable cards interface. The swipe-left/swipe-right for yes/no input. As seen in apps like Jelly and Tinder, and many others.

Installing

npm install --save vue-swing

Usage

import VueSwing from 'vue-swing'

Vue.component('vue-swing', VueSwing)
<vue-swing
  @throwout="throwout"
  @throwin="throwin"
  :config="config"
>
  <div class="box">Throw me!</div>
</vue-swing>

Properties

VueSwing takes in one config Object, which can consist of any of these keys:

NameDescriptionDefault
isThrowOutInvoked in the event of dragend. Determines if element is being thrown out of the stack.Element is considered to be thrown out when throwOutConfidence is equal to 1.
allowedDirectionsArray of directions in which cards can be thrown out.[VueSwing.Direction.DOWN, VueSwing.Direction.LEFT, VueSwing.Direction.RIGHT, VueSwing.Direction.UP].
throwOutConfidenceInvoked in the event of dragmove. Returns a value between 0 and 1 indicating the completeness of the throw out condition.Ration of the absolute distance from the original card position and element width.
throwOutDistanceInvoked when card is added to the stack. The card is thrown to this offset from the stack.The value is a random number between minThrowOutDistance and maxThrowOutDistance.
minThrowOutDistanceIn effect when throwOutDistance is not overwritten.450.
maxThrowOutDistanceIn effect when throwOutDistance is not overwritten.500.
rotationInvoked in the event of dragmove. Determine the rotation of the element.Rotation is equal to the proportion of horizontal and vertical offset times the maximumRotation constant.
maxRotationIn effect when rotation is not overwritten.20.
transformInvoked in the event of dragmove and every time the physics solver is triggered.Uses CSS transform to translate element position and rotation.

For more information, look at Swing's documentation

Events

NameDescription
throwoutWhen card has been thrown out of the stack.
throwoutendWhen card has been thrown out of the stack and the animation has ended.
throwoutdownShorthand for throwout event in the VueSwing.Direction.DOWN direction.
throwoutleftShorthand for throwout event in the VueSwing.Direction.LEFT direction.
throwoutrightShorthand for throwout event in the VueSwing.Direction.RIGHT direction.
throwoutupShorthand for throwout event in the VueSwing.Direction.UP direction.
throwinWhen card has been thrown into the stack.
throwinendWhen card has been thrown into the stack and the animation has ended.
dragstartHammer panstart.
dragmoveHammer panmove.
dragendHammer panend.
destroyCardWhen card.destroy calls stack.destroyCard.

For more information, look at Swing's documentation

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Tutorials

No tutorials found
Add a tutorial