Flipping Info Card Component For Vue.js

Install & Download:

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.