@codehat/vue-img-cards

vue-img-cards

Image card component library for Vue

## 📝 Table of Contents

• 📝 Table of Contents
• 🧐 About
• Installing the library
• 🏁 Components
  • vue-profile-Card
    • Props
    • Slot
    • Usage
  • vue-mini-bio
    • slots
    • Usage
• ⛏️ Built Using

🧐 About

This is a set of Vue Image card components for special purposes. Each components come with props and slots for easy customization. The CSS animation make it awesome, thanks to the developer community.

Installing the library

npm i --save @codehat/img-cards

🏁 Components

The library includes the following components

vue-profile-Card

VueProfileCard is a CSS animated Image Card with background animation.

Demo

Props

This component come with a single prop img, which can be used to pass a image url and an alt tag. This prop is an object.

img: {
      type: Object,
      default: new Object({
        src:
          "./profile.png",
        alt: "images",
      }),
    },

Slot

The slot details can be used to _add set of social icons or single paragraph or heading of your choice.

<template>
  <div id="app">
    <vue-profile-card >
     <template slot="details">
                  <h1 class="is-size-5">Web Developer</h1>
                  <span class="icon  ">
                <i>
                 <a :href="`${fb}`"> <v-icon name="md-facebook" scale="1.5" /></a>
                </i>
                <i>
                  <a :href="`${gh}`"> <v-icon name="oi-octoface" scale="1.5" /></a>
                </i>
                <i>
                  <a :href="`${tw}`"> <v-icon name="bi-twitter" scale="1.5"/></a>
                </i> <i>
                 <a :href="`${wp}`">  <v-icon name="fa-wordpress"  scale="1.5"/></a>
                </i></span>
      </template>
      </vue-profile-card>
  </div>
</template>

Usage

<script>
import VueProfileCard from '@manojap/vue-profile-card'
export default {
  name: "App",
  components: {
    VueProfileCard
  },
};
</script>

vue-mini-bio

VueMiniBio is a Image card with a Opening panel (hover effect) which can be used to show bio with social (customizable)

slots

img slot can be used to style the main image according to your needs and the *detail slot help to set the content

Usage

<script>
import {vueMiniBio} from '@codehat/vue-img-cards';
import Vue from 'vue';

export default Vue.extend({
  components: { vueMiniBio },
  name: 'App',
});
</script>

<template>
  <div id="app">
    <vue-mini-bio/>
  </div>
</template>

⛏️ Built Using

• VueJs - Web Framework
• NodeJs - Server Environment