1.0.7 • Published 6 years ago
v-swipeout
Install
npm install --save v-swipeout
Usage
import VSwipeout from 'v-swipeout';
export default {
methods: {
readBtn () {
console.log('read')
},
replayBtn () {
console.log('replay')
},
moreBtn () {
console.log('more')
},
deleteBtn () {
console.log('delete')
},
openCb () {
console.log('open')
},
closeCb () {
console.log('close')
}
},
components: {
VSwipeout
}
}
<v-swipeout
:autoClose="false"
:style="{ backgroundColor: 'white' }"
:left="[
{
text: 'read',
onPress: readBtn,
style: { backgroundColor: 'blue', color: 'white' }
},
{
text: 'reply',
onPress: replayBtn,
style: { backgroundColor: 'green', color: 'white' }
}
]"
:right="[
{
text: 'more',
onPress: moreBtn,
style: { backgroundColor: 'orange', color: 'white' }
},
{
text: 'delete',
onPress: deleteBtn,
style: { backgroundColor: 'red', color: 'white' }
}
]"
:onOpen="openCb"
:onClose="closeCb"
>
<div
:style="{
height: 44,
backgroundColor: 'white',
lineHeight: '44px',
borderTop: '1px solid #dedede',
borderBottom: '1px solid #dedede',
}"
>
swipe out simple demo
</div>
</v-swipeout>
API
Props
name | description | type | default |
---|
style | swipeout style | Object | |
left | swipeout buttons on left | Array | null |
right | swipeout buttons on right | Array | null |
autoClose | auto close on button press | Boolean | false |
onOpen | open callback | (): void | function() {} |
onClose | close callback | (): void | function() {} |
Button props
name | description | type | default |
---|
text | button text | String | |
style | button style | Object | |
onPress | button press function | (): void | function() {} |