swipeable-cell v0.2.2

swipeable-cell

A vue component which imitates iOS UITableViewCell and UICollectionViewCell swipe style

features

it's so pretty easy to use, and it supports for:

• automatally fit your cell content's height.
• customized action buttons style with backgroundColor, text-font etc..
• one or more action buttons.
• action buttons with three styles: text only, text and image, image only.
• specify action button's content direction: vertical or horizontal.
• embedded in pulling refresh component to load more data cells etc..

Demo

default style

more actions

text only

image only

horizontal

note: all of these styles support to swiping right to delete function.

installation

npm package

npm install swipeable-cell -S

how to use

the easiest way use is wrapping you cell content

import it in your component header.

improt SwipeableCell from 'swipeable-cell'

register into components object and add it in template like this

<swipeable-cell v-for="(item, index) in dataList", 
                :key="index", 
                :data-index="index",
                :options="options",
                @swipeable-cell-actions="actionsHandler">
  // ... your cell container dom node
</swipeable-cell>

action buttons will give you a callback when user tapped, in your component's methods

export default {
  ...
  methods: {
  	// index: you just tapped cell
    actionsHandler(o) {
      // cellIndex: which is cell index in your dataList 
      // actionIndex： which is tapped action button's index if you have more,
      // and if only one the index is 0
      const { cellIndex, actionIndex } = o
      this.dataList.splice(cellIndex, 1)
    }
  }
}

also support more style customized

you can return a options object in your data() object like bellow

data() {
  return {
    ...
    
    options: {
      // specify this action button's width, optional
  	  width: 90,
      // specify action contents direction, optional 
      direction: 'horizontal',
      // specify how many buttons would cell have, optional
      // note: if you didn't pass this array, cell will provide a delete button as default
      actions: [
        {
          text: 'more',
          image: require('../xxx/xxx.png'),
          backgroundColor: '#c7c6cb',
        },
        {
          text: 'flag',
          image: require('../xxx/xx.gif'),
          backgroundColor: '#fd9502',
        },
        {
          text: 'delete',
          image: require('../xx/xxx.jpg'),
          backgroundColor: '#fd3d30',
        }
      ]
    },
  }
}

props

prop of data-index is required. so you must pass it value when you loop for cell

some configurable value in options object:

for every action style you can pass

only image actions data like

...
actions: [
  {
    image: require('your local image path here'),
    backgroundColor: '#c7c6cb',
  },
  ...
]

only text actions data like

...
actions: [
  {
    text: 'some text here',
    backgroundColor: '#c7c6cb',
  },
  ...
]

event

for more usage examples please see demo project.

warmly welcome your PR and issues. ❤️