@codehat/vue-img-cards
v1.3.1
Published
A set of Vue image card components for special purposes
Downloads
21
Maintainers
Readme
🧐 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.
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>