At this moment, I will release my special component that has been built using VueJS. I named it with PokeCard (stands for Pocket Card), which is inspired by the Pokeball in the most popular cartoon of my childhood, Pokemon. Basically, just like any card component that displays profile picture and some attributes. But, by default, pokecard only show short information. However, when popped, then all the secrets will be revealed.
Now, let's go!
Attention!
To be able using this template, you need several studies of the components related to perspective of VueJS. You can visit the official website directly here.
And there may be some issues with browser compatibility.
As seen below,
As usual, please, make sure to do the following steps:
npm install -g vue-cliHere is a general description of the implementation and the results
All of icon resources is here http://fontawesome.io/icons/.
Code
<template>
<div id='pokecard' :class='cardDim'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Salsa'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Scada'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Sansita'>
<div class='upper'>
<div class='badge'>
<p class='fa fa-star fs-25'></p>
<p class='score sansita fs-20'>{{ parseInt(score) }}</p>
</div>
<p class='title sansita fs-35'>{{ cosmo }}</p>
</div>
<div class='lower'>
<button class='btnPop scada fs-18'>{{ buttons[0] }}</button>
<button class='btnPop scada fs-18'>{{ buttons[1] }}</button>
</div>
<div class='main'>
<img @click='action' @mouseenter='toggle(1)' @mouseleave='toggle(0)' src='./../assets/profile_pict02.jpeg' />
<div class='wanda scada fs-18'>
<slot name='cover'></slot>
<div v-for='e of wanda'><i :class='[e.icon,"fs-20"]' :key='e.cosmo'></i>{{ e.text }}</div>
<slot></slot>
</div>
</div>
</div>
</template>
And here is the main container that will implement the component of Pokecard.
Main.vue
<template>
<div id='main'>
<pokecard v-bind='data'>
<img slot='cover' src="./../assets/profile_pict01.jpeg" style='width:100%'>
</pokecard>
</div>
</template>
<script>
import Pokecard from './Pokecard'
export default{
data() { return{
data:{
cosmo:'Murez Nasution'
,cardDim:'cardDim'
,buttons:['Chat','Follow']
,score:99
,xHeight:350
,wanda:[
{ cosmo:'job', icon:'fa fa-address-book', text:'Software Developer' }
,{ cosmo:'home', icon:'fa fa-home', text:'Medan, Indonesia' }
,{ cosmo:'birth', icon:'fa fa-birthday-cake', text:'October 23, 1990' }
]
}
}}
,methods:{
test(e) { alert(3) }
}
,components:{ Pokecard }
}
</script>
<style scoped>
.cardDim{
width:300px;
height:300px;
}
</style>
Result
StringtrueNumbertrueStringtrueNumber300Array[ 'Follow', 'Projects' ]Array