https://github.com/rodleviton/vue-card-stack
Stackable, swipeable, tweakable Vue card component.
https://github.com/rodleviton/vue-card-stack
component vuejs
Last synced: 2 months ago
JSON representation
Stackable, swipeable, tweakable Vue card component.
- Host: GitHub
- URL: https://github.com/rodleviton/vue-card-stack
- Owner: rodleviton
- License: mit
- Created: 2020-03-01T03:13:53.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-02-04T07:48:00.000Z (over 2 years ago)
- Last Synced: 2024-04-14T04:26:57.414Z (about 1 year ago)
- Topics: component, vuejs
- Language: Vue
- Homepage: https://rodleviton.github.io/vue-card-stack/
- Size: 4.46 MB
- Stars: 75
- Watchers: 1
- Forks: 14
- Open Issues: 18
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Project Status: 🚨 Unmaintained 🚨
This project is no longer actively maintained. I will not be accepting pull requests, addressing issues, nor making future releases. I have plans to revisit this project in the future but it will likely become a multi-framework project under a different repo name. 🕊️
# vue-card-stack
[](https://github.com/rodleviton/vue-card-stack/blob/master/LICENSE)
[](https://github.com/vuejs/awesome-vue)
## Install
```bash
npm install vue-card-stack
or
yarn add vue-card-stack
```
## Usage
```js
import Vue from "vue";
import VueCardStack from "vue-card-stack";
export default {
components: {
VueCardStack,
},
data() {
return {
cards: [
{ background: "#00659d" },
{ background: "#00abbc" },
{ background: "#e2c58a" },
{ background: "#fc8890" },
{ background: "#b35d7f" },
],
};
},
};
```
```html
```
## API
### Props
| Name | Type | Default | Description |
| :-------------------- | :---------------- | :-----------------------------: | :------------------------------------------------------------------------------------------------- |
| **cards** | `Array` | `[]` | Array of cards to render stack. |
| **cardWidth** | `Number` | `300` | Width of card in pixels. |
| **cardHeight** | `Number` | `400` | Height of card in pixels. |
| **stackWidth** | `[Number:String]` | `cardWidth + paddingHorizontal` | Width of card stack in pixels or as a percentage (responsive). |
| **sensitivity** | `Number` | `0.25` | Distance card must travel as percentage of `cardWidth` + `paddingHorizontal`. |
| **maxVisibleCards** | `Number` | `10` | Number of cards that will be visible at any one time. |
| **scaleMultiplier** | `Number` | `0.75` | A number between `0` and `1` that determines how much a card scales as it moved through the stack. |
| **speed** | `Number` | `0.2` | Duration in milliseconds for card swipe transition. |
| **paddingHorizontal** | `Number` | `20` | A gutter size in pixels that will be applied to left and right hand side of card stack. |
| **paddingVertical** | `Number` | `20` | A gutter size in pixels that will be applied to top and bottom of card stack. |
> To help get you up and running quickly, most props are optional. To get started, simply provide an `Array` of cards to the component.
### Events
| Name | Attributes | Listen to | Description |
| :------- | :--------- | :-------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **move** | `(value)` | `@move` | Emitted as card position changes. Value represents distance card has moved as a value between `0` and `1` values below `0` and above `1` are returned if card is moved beyond `min` and `max` distances. |
### Slots
| Name | Description |
| :------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **card** | Slot for individual card in stack. |
| **nav** | Slot for controlling navigation of card stack.
- `activeCardIndex` - returrns current card index.
- `onNext` - method to move forwards though stack.
- `onPrevious` - method to move backwards though stack.
## Docs
See the full api docs and examples here: https://rodleviton.github.io/vue-card-stack/
## Examples
https://www.rodleviton.com/pixels/vue-card-stack
## License
MIT