expand-card-flavored v1.1.1

Expandable Card

Simple Expandable Card

Installation

• npm i expand-card-flavored

Global Registration

import { createApp } from "vue";
import App from "./App.vue";
import ExpandCard from "expand-card-flavored";
import "expand-card-flavored/dist/style.css";

const app = createApp(App);

app.use(ExpandCard);

app.mount("#app");

Local Registration

import ExpandCard from "expand-card-flavored";
import "expand-card-flavored/dist/style.css";

export default {
  name: "App",
  components: { ExpandCard },
};

Props

Demo

<template>
  <ExpandCard 
    :cardHeight=300 
    :cards="
      [ 
        { 
          imagePath: 'https:.....', 
          icon: null,
          label: 'Test', 
          link: '#', 
        }, 
        { 
          imagePath: Img1,
          icon: 'A',
          label: 'Test' 
        }, 
      ]"
  />
</template>

<script>
  import Img1 from "./assets/images/1.jpg";
  import Img2 from "./assets/images/2.jpg";
</script>

OR

<template>
  <ExpandCard 
    iconBGColor="#bae1ff" 
    iconFontColor="yellow" 
    :cards="data" 
  />
</template>

<script>
  import Img1 from "./assets/images/1.jpg";
  import Img2 from "./assets/images/2.jpg";

  var data = [
    {
      imagePath: "https:.....",
      icon: null,
      label: "Test",
      link: "#",
    },
    {
      imagePath: Img1,
      icon: "A",
      label: "Test",
    },
  ];
</script>

code for fun