vue-listshow
v0.1.0
Published
vue-listshow is a Vue component to create a and display you lists in a beautiful sliding cards.
Downloads
38
Maintainers
Readme
vue-listshow
vue-listshow is a Vue component to create a and display your lists in a beautiful sliding cards.
It's mainly inspired from the electronjs releases cards
Installation
Via YARN
yarn add vue-listshow
Via NPM
npm i vue-listshow
Then register it inside your component
import VueListshow from 'vue-listshow'
...
components: {
...
VueListshow,
}
Usage
Now, what you have to do is to pass your array of objects as an items
prop
and then you'll receive back each object as an item
property
<vue-listshow :items="arrayList">
<template slot-scope="{ item }">
...
</template>
</vue-listshow>
You may refer to the VueJs#scoped-slot docs for more information about how to use scoped slots
Note
By default no styles attached to the cards generated, so you should pass your own style through your classes
prop
<vue-listshow :items="arrayList" :classes="m-2 w-full bg-black text-grey-light rounded-lg">
...
</vue-listshow>
Available props:
| Prop | Type | Default | Required | | -------------- | -------- | ------- | -------- | | items | Array | --- | true | | classes | String | --- | false | | transition | Number | 300ms | false | | opacity | Number | 0.7 | false |
Example of usuage
<vue-listshow
:items="items"
classes="m-2 w-full bg-black text-grey-light rounded-lg"
:transition="400"
:opacity=".8"
>
...
</vue-listshow>
Issues and Contribution
If you find any bug or problem please open an issue or create a pull request, Thanks!.
Licence
The MIT License (MIT). Please see License File for more information.