Vue implementation of Pokémon Cards Holographic effect in CSS (from https://github.com/simeydotme/pokemon-cards-css)
npm install vue-pokemon-cards-css
npm i vue-pokemon-cards-css
`
Example
`vue
v-for="card of slices"
@click.native.stop="active = active === card ? null : card"
:key="card.id"
:name="card.name"
:img="card.images.large"
:number="card.number"
backimg="https://tcg.pokemon.com/assets/img/global/tcg-card-back-2x.jpg"
:supertype="card.supertype"
:subtypes="card.subtypes"
:rarity="card.rarity"
:gallery="card.gallery"
:active="active === card"
/>
`
$3
`
https://github.com/zzy-life/components-pokemon-cards-css/blob/master/src/assets/data.json
`
options
$3
Card material (supertype and subtype)
| data.json |
| ------------------------------------------------- |
| // basics |
| cards.slice(0, 6), |
| // holos |
| cards.slice(6, 12), |
| // galaxies |
| cards.slice(12, 15), |
| // radiant |
| cards.slice(15, 18), |
| // basicGallery |
| cards.slice(60, 63), |
| // vee |
| cards.slice(18, 21), |
| // veeUltra |
| cards.slice(21, 24), |
| // veeAlt |
| [...cards.slice(27, 30), ...cards.slice(33, 36)], |
| // veeMax |
| cards.slice(24, 27), |
| // veeMaxAlt |
| [cards[36], cards[31], cards[37]], |
| // veeStar |
| cards.slice(39, 42), |
| // trainerHolo |
| cards.slice(42, 48), |
| // rainbow |
| cards.slice(48, 51), |
| // gold |
| cards.slice(51, 60), |
| // veeGallery |
| cards.slice(63, 69), |
$3
small picture
$3
big picture
$3
card back view
Local operation
$3
`
npm install
`
$3
`
npm run serve
`
$3
`
npm run build
``