https://github.com/miloudimohamed/vue-listshow

vue-listshow is a Vue component to create a and display your lists in a beautiful sliding cards.
https://github.com/miloudimohamed/vue-listshow

card component list vue-card vue-component vue-list vue-listshow vuejs

Last synced: 14 days ago
JSON representation

vue-listshow is a Vue component to create a and display your lists in a beautiful sliding cards.

• Host: GitHub
• URL: https://github.com/miloudimohamed/vue-listshow
• Owner: MiloudiMohamed
• License: mit
• Created: 2019-02-13T15:34:32.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2022-02-26T09:51:26.000Z (almost 3 years ago)
• Last Synced: 2024-12-11T09:42:24.128Z (about 1 month ago)
• Topics: card, component, list, vue-card, vue-component, vue-list, vue-listshow, vuejs
• Language: Vue
• Size: 991 KB
• Stars: 3
• Watchers: 2
• Forks: 0
• Open Issues: 14
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# vue-listshow

![](https://img.shields.io/npm/v/vue-listshow.svg?label=version&colorB=blue&style=flat)

![](https://img.shields.io/npm/dt/vue-listshow.svg?style=flat)

![](https://img.shields.io/npm/l/vue-listshow.svg?style=flat)

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](https://electronjs.org/) releases cards

![alt text](/preview/vue-listshow.gif)

## Installation

#### Via YARN

```bash

yarn add vue-listshow

```

#### Via NPM

```bash

npm i vue-listshow

```

Then register it inside your component

```js

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

```html

    

        ...

    

```

You may refer to the [VueJs#scoped-slot](https://vuejs.org/guide/components-slots.html#Scoped-Slots-with-the-slot-scope-Attribute) 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

```html

    ...

```

#### Available props:

| Prop           | Type     | Default | Required |

| -------------- | -------- | ------- | -------- |

| items          | Array    |   ---   |  true    |

| classes        | String   |   ---   |  false   |

| transition     | Number   |  300ms  |  false   |

| opacity        | Number   |  0.7    |  false   |

**Example of usuage**

```html

...

```

## 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.