vue-swipe-actions component

A VueJS component to create iOS styled swipe actions.

Table of contents

• Browser Support
• Demo
• Getting started
• Import styles
• Usage
• SwipeList
• Available Props
• Events
• Methods
• SwipeOut
• Want to Contribute?
• Need Help / Support?
• Collection of Other Components
• Changelog
• Credits
• License
• Keywords

Browser Support

83.0 ✔	77.0 ✔	13.1.1 ✔	83.0 ✔	11.9 ✔

Demo

Getting started

npm install --save vue-weblineindia-swipe

import { SwipeList, SwipeOut } from 'vue-weblineindia-swipe';
export default {
  components: {
    SwipeOut,
    SwipeList
  }
};

Import Styles

import 'vue-weblineindia-swipe/dist/vue-swipe-actions.css';

Usage

<swipe-list
    ref="list"
    class="card"
    :disabled="!enabled"
    :items="mockSwipeList"
    item-key="id"
    @swipeout:click="itemClick"
>
    <template v-slot="{ item, index, revealLeft, revealRight, close }">
        <!-- item is the corresponding object from the array -->
        <!-- index is clearly the index -->
        <!-- revealLeft is method which toggles the left side -->
        <!-- revealRight is method which toggles the right side -->
        <!-- close is method which closes an opened side -->
        <div class="card-content">
            <!-- style content how ever you like -->
            <h2>{{ item.title }}</h2>
            <p>{{ item.description }}</p>
            <span>{{ index }}</span>
        </div>
    </template>
    <!-- left swipe side template and v-slot:left="{ item }" is the item clearly -->
    <!-- remove if you dont wanna have left swipe side  -->
    <template v-slot:left="{ item, close }">
        <div class="swipeout-action red" title="remove" @click="remove(item)">
            <!-- place icon here or what ever you want -->
            <i class="fa fa-trash"></i>
        </div>
        <div class="swipeout-action purple" @click="close">
            <!-- place icon here or what ever you want -->
            <i class="fa fa-close"></i>
        </div>
    </template>
    <!-- right swipe side template and v-slot:right"{ item }" is the item clearly -->
    <!-- remove if you dont wanna have right swipe side  -->
    <template v-slot:right="{ item }">
        <div class="swipeout-action blue">
            <!-- place icon here or what ever you want -->
            <i class="fa fa-edit"></i>
        </div>
    </template>
    <template v-slot:empty>
        <div>
            <!-- change mockSwipeList to an empty array to see this slot in action  -->
            list is empty ( filtered or just empty )
        </div>
    </template>
</swipe-list>

export default {
  components: {
    SwipeOut,
    SwipeList
  },
  data() {
    return {
      enabled: true,
      mockSwipeList: [
          {
            id: 0,
            title: "Title1",
            description: "Description1",
            value: "value1"
          },
          {
            id: 1,
            title: "Title2",
            description: "Description2",
            value: "value2"
          },
          {
            id: 3,
            title: "Title3",
            description: "Description3",
            value: "value3"
          }
      ]
    };
  },
  methods: {
    revealFirstRight() {
      this.$refs.list.revealRight(0);
    },
    revealFirstLeft() {
      this.$refs.list.revealLeft(0);
    },
    closeFirst() {
      this.$refs.list.closeActions(0);
    },
    closeAll() {
      this.$refs.list.closeActions();
    },
    remove(item) {
      this.mockSwipeList = this.mockSwipeList.filter(i => i !== item);
      // console.log(e, 'remove');
    },
    itemClick(e) {
      console.log(e, "item click");
    },
    fbClick(e) {
      console.log(e, "First Button Click");
    },
    sbClick(e) {
      console.log(e, "Second Button Click");
    },
  },
}

SwipeList

SwipeList component is just a helper for listing multiple SwipeOuts.

Available Props

Events

Methods

SwipeOut

SwipeOut is the main component, representing a single item with it’s actions.

Props

Events

Want to Contribute?

• Created something awesome, made this code better, added some functionality, or whatever (this is the hardest part).
• Fork it.
• Create new branch to contribute your changes.
• Commit all your changes to your branch.
• Submit a pull request.

Need Help?

We also provide a free, basic support for all users who want to use this VueJS Swipe in their software project. In case you want to customize this swipe to suit your development needs, then feel free to contact our VueJS developers.

Collection of Components

We have built many other components and free resources for software development in various programming languages. Kindly click here to view our Free Resources for Software Development.

Changelog

Detailed changes for each release are documented in CHANGELOG.md.

Credits

vue-weblineindia-swipe is inspired by vue-swipe-actions.

License

MIT

Keywords

vuejs,vue-weblineindia-swipe,vue,swipe, list