A Vue.js component to generate an elegant, flipping info card with spark lines on the applications.
How to use it:
Install and import the vue-info-card.
import InfoCard from 'vue-info-card';
Use the component.
<template>
<div>
<info-card :frontType="front.type"
:frontTitle="front.title"
:frontData="front.graphData"
:backTitle="back.title"
:backData="back.message"/>
</div>
</template>
export default {
components: {
InfoCard,
},
data() {
return {
front: {
title: 'Spark Line',
graphData: [3, 2, 5, 9, 5, 10, 3, 5, 0, 0, 1, 8, 2, 9, 0],
},
back: {
title: 'Back Content',
message: 'Back Content Here',
},
};
},
};
All possible props.
- frontType: content type on the front of the card: graph or text
- frontTitle: front title
- frontData: data for the spark line
- frontTrendGradients: Gradient used on the spark line
- backType: content type on the back of the card: graph or text
- backTitle: back title
- backData: data for the spark line
- backTrendGradients: Gradient used on the spark line
Preview:
Changelog:
v0.1.4 (08/01/2020)
- Updated package
Download Details:
Author: karakanb
Live Demo: https://burakkarakan.com/vue-info-card/
Download Link: https://github.com/karakanb/vue-info-card/archive/master.zip
Official Website: https://github.com/karakanb/vue-info-card
Install & Download: