# vue-product-card

> Simple and can be customized product card component

Latest version **1.4.0** (published 2021-01-26) · ISC license · 0 weekly downloads

## Install

```sh
npm install vue-product-card
pnpm add vue-product-card
yarn add vue-product-card
bun add vue-product-card
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.4.0 |
| Published | 2021-01-26 |
| First published | 2021-01-25 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 7.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Kaan ŞEN \| kaansen57@outlook.com |
| Maintainers | kaansen57 |
| Keywords | vue,vuejs,card,product card,component |

## Links

- npm: https://www.npmjs.com/package/vue-product-card
- npm.io page: https://npm.io/package/vue-product-card

## Recent versions

- 1.4.0 (latest) — 2021-01-26
- 1.3.0 — 2021-01-26
- 1.2.0 — 2021-01-26
- 1.1.0 — 2021-01-26
- 1.0.0 — 2021-01-25

## README

# Vue Product Card

Simple and can be customized product card component

## Examples

![vue-product-card](https://github.com/kaansen57/vue-product-card/blob/master/vue-product-card.gif?raw=true)

## Usage

Install VueProductCard for Vue.js through npm:

```
npm install vue-product-card
```

### Mount with global

```vue
import Vue from "vue";
import VueProductCard from 'vue-product-card'

Vue.component("vue-product-card",VueProductCard)
```

### Mount with component

```vue
<template>
  <vue-product-card
    :infos="infos"
    :cardColor="cardColor"
    :stripColor="stripColor"
    :buttonColor="buttonColor"
    :textColor="textColor"
    :numberShow="true"
  ></vue-product-card>
</template>

<script>
import VueProductCard  from 'vue-product-card'
export default {
  components:{
      "vue-product-card" : VueProductCard
  },
  data() {
    return {
      cardColor: "#313131",
      stripColor: "#35AFFB",
      buttonColor: "#35AFFB",
      textColor: "#fff",
      infos: [
        {
          src: "foo.png",
          title: "Headphone",
          price: "89.99₺",
          url: "",
          btnText: "Satın Al",
        },
      ],
    };
  },
};
</script>
```
## Props

|         Names         |  Types  |                                                Options                                               |  Default  |
|:---------------------:|:-------:|:----------------------------------------------------------------------------------------------------:|:---------:|
|     infos(required)   |  Array  | [{src:"foo.png", title:"card title", price:"89,99$", url:"https://example.com", btnText:"Buy Now"}]  |           |
|  cardColor(required)  |  String |                                 cardColor:"#000" \| cardColor:"black"                                |           |
|  stripColor(required) |  String |                                stripColor:"#000" \| stripColor:"black"                               |           |
| buttonColor(required) |  String |                               buttonColor:"#000" \| buttonColor:"black"                              |           |
|  textColor(optional)  |  String |                                 textColor:"#000" \| textColor:"black"                                | "#ffffff" |
|  numberShow(optional) | Boolean |                                            false \| true                                             |    true   |

---
_Source: https://npm.io/package/vue-product-card · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._