vue-swipe-actions
iOS style swipe actions for Vue.js, Live Demo (Source)
Installation
npm install --save vue-swipe-actions
; components: SwipeOut SwipeList ;
Basic Usage
Import Styles
;
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 | |
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 |
<!-- 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 --> <!-- style content how ever you like --> {{ item.title }} {{ item.description }} {{ index }} <!-- left swipe side template and v-slot:left="{ item }" is the item clearly --> <!-- remove if you dont wanna have left swipe side --> <!-- place icon here or what ever you want --> <!-- place icon here or what ever you want --> <!-- right swipe side template and v-slot:right"{ item }" is the item clearly --> <!-- remove if you dont wanna have right swipe side --> <!-- place icon here or what ever you want --> <!-- place icon here or what ever you want --> <!-- change mockSwipeList to an empty array to see this slot in action --> list is empty ( filtered or just empty )
components: SwipeOut SwipeList { 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: { this$refslist; } { this$refslist; } { this$refslist; } { this$refslist; } { thismockSwipeList = thismockSwipeList; // console.log(e, 'remove'); } { console; } { console; } { console; }
Author
© 2018-9 eCollect AG.