Flipping Info Card Component For Vue.js

Description:

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

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

Last Update: August 13, 2019

Install:

You Might Be Interested In:

Add Comment