 |
@desco/vue-flipPacote NPM para VueJS para efeito de FLIP nos elementos.
|
📋 Tabela de conteúdos
🛠️ Tecnologias
As seguintes tecnologias são utilizadas:
⚙️ Instalação
npm install --save @desco/vue-flipNote que será necessário ter o NPM instalado para o comando funcionar.
📦 Importação
<script>
import VueFlip = require('@desco/vue-flip')
export default {
components: { VueFlip, }
}
<script>
📚 Como Usar
<template>
<VueFlip :turned="turned" height="300px">
<template slot="front">
<div class="card">
<button @click="turned = true">Ver a Traseira</button>
</div>
<template slot="back">
<div class="card">
<button @click="turned = false">Ver a Frente</button>
</div>
</template>
</VueFlip>
</template><script>
export default {
data () {
return {
turned: false
}
}
}
</script>Hover
Também é possível fazer o flip quando o mouse passar por cima do elemento, veja:
<template>
<VueFlip hover height="300px">
<template slot="front">
<div class="card">
Frente
</div>
<template slot="back">
<div class="card">
Traseira
</div>
</template>
</VueFlip>
</template>Parâmetros
| Nome | Tipo | Detalhes | Descrição |
|---|---|---|---|
| height | String | - | Altura do elemento |
| turned | Boolean | false | Se o elemento esta virado (Use para fazer o flip de acordo com a sua regra) |
| hover | Boolean | false | Se deve virar (fazer o flip) quando passar o mouse sobre o elemento |
Autor
Rafael A. R. Dias
|
|