v-swipeout

1.0.7 • Public • Published

v-swipeout

Build Status

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() {}

Package Sidebar

Install

npm i v-swipeout

Weekly Downloads

8

Version

1.0.7

License

MIT

Last publish

Collaborators

  • ttian226