vs

v-swipeout

swipe out ui component for vue

Showing:

Popularity

Downloads/wk

8

GitHub Stars

5

Maintenance

Last Commit

4yrs ago

Contributors

0

Package

Dependencies

2

Size (min+gzip)

0.2KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

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

namedescriptiontypedefault
styleswipeout styleObject
leftswipeout buttons on leftArraynull
rightswipeout buttons on rightArraynull
autoCloseauto close on button pressBooleanfalse
onOpenopen callback(): voidfunction() {}
onCloseclose callback(): voidfunction() {}

Button props

namedescriptiontypedefault
textbutton textString
stylebutton styleObject
onPressbutton press function(): voidfunction() {}

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100