Swipe cards or elements around with VueSwing

VueSwing

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

Example

To start swinging elements around, start by installing the wrapper:

install it using the following command:

yarn add vue-swing

Register:

import Vue from 'vue'
import VueSwing from 'vue-swing'

Vue.component('vue-swing', VueSwing)

Example usage in your template

<vue-swing
  @throwout="throwout"
  @throwin="throwin"
  :config="config"
>
  <div class="box">Toss me! Don't tell the elf!</div>
</vue-swing>

Use the above options to handle your data:

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      config: {
        minThrowOutDistance: 100,
                // Determine the rotation of the element
        maxRotation: 80
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.box {
  border: 2px solid;
  border-radius: 25px;
  color: purple;
  width: 120px;
}
</style>

Props

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

  • isThrowOut Determines if element is being thrown out of the stack.
  • allowedDirections Array of directions in which cards can be thrown out.
  • throwOutConfidence Invoked in the event of dragmove. Returns a value between 0 and 1 indicating the completeness of the throw out condition.
  • throwOutDistance Invoked when card is added to the stack. The card is thrown to this offset from the stack.
  • minThrowOutDistance In effect when throwOutDistance is not overwritten.
  • maxThrowOutDistance In effect when throwOutDistance is not overwritten.
  • 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.
  • 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

This is it! This project's repository is hosted on GitHub for everyone to see.