https://github.com/ecollect/vue-swipe-actions
iOS style swipe actions
https://github.com/ecollect/vue-swipe-actions
javascript swipe swipe-cards vuejs
Last synced: about 1 year ago
JSON representation
iOS style swipe actions
- Host: GitHub
- URL: https://github.com/ecollect/vue-swipe-actions
- Owner: eCollect
- License: mit
- Created: 2018-06-14T15:01:52.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2022-12-10T16:47:53.000Z (over 3 years ago)
- Last Synced: 2025-04-04T14:06:31.444Z (about 1 year ago)
- Topics: javascript, swipe, swipe-cards, vuejs
- Language: JavaScript
- Homepage: https://ecollect.github.io/vue-swipe-actions/
- Size: 1.93 MB
- Stars: 235
- Watchers: 13
- Forks: 46
- Open Issues: 28
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-swipe-actions
**iOS style swipe actions for Vue.js, [Live Demo](https://ecollect.github.io/vue-swipe-actions/)** ([Source](https://github.com/eCollect/vue-swipe-actions/blob/master/demo/src/App.vue))
## Installation
```
npm install --save vue-swipe-actions
```
```js
import { SwipeList, SwipeOut } from 'vue-swipe-actions';
export default {
components: {
SwipeOut,
SwipeList
}
};
```
## Basic Usage
### Import Styles
```javascript
import 'vue-swipe-actions/dist/vue-swipe-actions.css';
```
### SwipeList
SwipeList component is just a helper for listing multiple SwipeOuts.
#### Props
| Prop | Data Type | Required|Default| Description |
| ---------------- | --------- |-------- |-------|------------------ |
| `items` | Array | * | | An array with your data |
| `item-key` | String | |id | Your key for :key when list is v-for-ed, if not found array index will used|
| `disabled` | Boolean | |false | if true items will be disabled, and text selection will be possible (on desktop). adds class ``swipeout--disabled`` |
| `item-disabled` | Function | |`js () => false` | A function that receives the item as parameter and returns true case disabled or false if not |
| `threshold` | Number | |45 | With that property you can fine tune when actions are considered open |
| `passive-listeners` | Boolean | |false | It defines if the touch events should be registered as passive or not |
| `revealed` | Object | || An object representing the revealed status of the items, key is the index and the value is either ```left``` or ```right```, use it with the ```.sync``` modifier |
#### Events
| Event | Payload | Description |
| ----------------------- | --------------- | -|
| `swipeout:click` | item | Emitted on single click/tap on the item |
| `active` | Boolean | Emitted when the user is opening/closing the any of the actions |
#### Methods
| Method | Params | Description |
| ----------------------- | --------------- | -|
| `revealRight` | index (number) | Reveals right actions on given index |
| `revealLeft` | index (number) | Reveals left actions on given index |
| `closeActions` | index (number)? | Closes actions on given index, or all if no index given |
| `isRevealed` | index (number) | Returns the revealed status on a given index, either ```false``` for closed, or ```left``` or ```right``` |
### SwipeOut
SwipeOut is the main component, representing a single item with it's actions.
#### Props
| Prop | Data Type | Required|Default| Description |
| ---------------- | --------- |-------- |-------|------------------ |
| `disabled` | Boolean | |false | if true items will be disabled, and text selection will be possible (on desktop). adds class ``swipeout--disabled`` |
| `threshold` | Number | |45 | With that property you can fine tune when actions are considered open |
#### Events
| Event | Payload | Description |
| ----------------------- | --------------- | -|
| `active` | Boolean | Emitted when the user is opening/closing the any of the actions |
```html
{{ item.title }}
{{ item.description }}
{{ index }}
list is empty ( filtered or just empty )
```
```js
export default {
components: {
SwipeOut,
SwipeList
},
data() {
return {
enabled: true,
mockSwipeList: [
{
id: 0,
title: "Some title",
description: "some description"
},
{
id: 1,
title: "Some title",
description: "some description"
},
{
id: 2,
title: "Some title",
description: "some description"
}
]
};
},
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");
},
},
}
```
## Author
© 2018-9 eCollect AG.