Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

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

Install

npm i v-swipeout

DownloadsWeekly Downloads

170

Version

1.0.7

License

MIT

Last publish

Collaborators

  • avatar