Press "Enter" to skip to content

Awesome iOS Style Swipe Actions for Vue.js

vue-swipe-actions component allows the user to perform some actions when the object is scrolled as you see it on iOS.

vue swipe actions, vue swipe cards, vue swipe button, vue awesome swiper, vue 3 touch events, mobile web swipe gesture, vuetify swipe

How to make use of it:

Installation

npm install --save vue-swipe-actions

Usage

import { SwipeList, SwipeOut } from 'vue-swipe-actions';

export default {
  components: {
    SwipeOut,
    SwipeList
  }
};
import 'vue-swipe-actions/dist/vue-swipe-actions.css';

Props

PropData TypeRequiredDefaultDescription
itemsArray* An array with your data
item-keyString idYour key for :key when the list is v-for-ed, if not found array index will be used
disabledBoolean falseif true items will be disabled, and text selection will be possible (on desktop). adds class swipeout--disabled
item-disabledFunction js () => falseA function that receives the item as a parameter and returns true case disabled or false if not
thresholdNumber 45With that property, you can fine-tune when actions are considered open
passive-listenersBoolean falseIt defines if the touch events should be registered as passive or not
revealedObject  An object represents the revealed status of the items, the key is the index and the value is either left or right, use it with the .sync modifier

Events

EventPayloadDescription
swipeout:clickitemEmitted on a single click/tap on the item
activeBooleanEmitted when the user is opening/closing any of the actions

Methods

MethodParamsDescription
revealRightindex (number)Reveals the right actions on a given index
revealLeftindex (number)Reveals left actions on given index
closeActionsindex (number)?Closes actions on the given index, or all if no index given
isRevealedindex (number)Returns the revealed status on a given index, either false for closed, or left or right

ios style swipe actions for vue js, vue-swipe-actions Plugin/Github


See Demo And Download

Official Website(eCollect): Click Here

This superior jQuery/javascript plugin is developed by eCollect. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.