goweiwen / Vue Swing
Licence: mit
Vue.js wrapper for Swing
Stars: ✭ 193
Projects that are alternatives of or similar to Vue Swing
React Touch Carousel
Ultra-customizable carousel framework for React.JS
Stars: ✭ 158 (-18.13%)
Mutual labels: swipe
Swipelayout
A library what allows you to execute a swipe for the android platform
Stars: ✭ 150 (-22.28%)
Mutual labels: swipe
Substance
A modern and high-performant Swing look-and-feel library
Stars: ✭ 163 (-15.54%)
Mutual labels: swing
Placeholderview
This library provides advance views for lists and stacks. Some of the views are build on top of RecyclerView and others are written in their own. Annotations are compiled by annotation processor to generate bind classes. DOCS -->
Stars: ✭ 2,104 (+990.16%)
Mutual labels: swipe
Awesome Swing
A list of frameworks, libraries and software for the Java Swing GUI toolkit.
Stars: ✭ 154 (-20.21%)
Mutual labels: swing
Slider
Touch swipe image slider/slideshow/gallery/carousel/banner mobile responsive bootstrap
Stars: ✭ 2,046 (+960.1%)
Mutual labels: swipe
Smartswipe
An android library to make swipe more easier and more powerful. Android各种侧滑，有这一个就够了
Stars: ✭ 1,911 (+890.16%)
Mutual labels: swipe
Android Video Listing Mvp
Android video listing with swipe view tabs based on mvp design pattern with complete functionalities like search and sort
Stars: ✭ 151 (-21.76%)
Mutual labels: swipe
Android Swipecards View
Android library to implement cards stack view with swipe to remove feature
Stars: ✭ 162 (-16.06%)
Mutual labels: swipe
React Native Head Tab View
Add collapsible headers to your tab-view components.
Stars: ✭ 171 (-11.4%)
Mutual labels: swipe
VueSwing
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:
| Name | Description | Default |
|---|---|---|
isThrowOut |
Invoked 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. |
allowedDirections |
Array of directions in which cards can be thrown out. | [VueSwing.Direction.DOWN, VueSwing.Direction.LEFT, VueSwing.Direction.RIGHT, VueSwing.Direction.UP]. |
throwOutConfidence |
Invoked 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. |
throwOutDistance |
Invoked 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. |
minThrowOutDistance |
In effect when throwOutDistance is not overwritten. |
450. |
maxThrowOutDistance |
In effect when throwOutDistance is not overwritten. |
500. |
rotation |
Invoked 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. |
maxRotation |
In effect when rotation is not overwritten. |
20. |
transform |
Invoked 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
| Name | Description |
|---|---|
throwout |
When card has been thrown out of the stack. |
throwoutend |
When card has been thrown out of the stack and the animation has ended. |
throwoutdown |
Shorthand for throwout event in the VueSwing.Direction.DOWN direction. |
throwoutleft |
Shorthand for throwout event in the VueSwing.Direction.LEFT direction. |
throwoutright |
Shorthand for throwout event in the VueSwing.Direction.RIGHT direction. |
throwoutup |
Shorthand for throwout event in the VueSwing.Direction.UP direction. |
throwin |
When card has been thrown into the stack. |
throwinend |
When card has been thrown into the stack and the animation has ended. |
dragstart |
Hammer panstart. |
dragmove |
Hammer panmove. |
dragend |
Hammer panend. |
destroyCard |
When card.destroy calls stack.destroyCard. |
For more information, look at Swing's documentation
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].