README

@desco/vue-flip

Pacote NPM para VueJS para efeito de FLIP nos elementos.

🚀 Pronto para uso! 🚀

Veja outros projetos NPM aqui.

Veja outros projetos aqui.

📋 Tabela de conteúdos

🛠️ Tecnologias
⚙️ Instalação
📦 Importação
📚 Como Usar

🛠️ Tecnologias

As seguintes tecnologias são utilizadas:

⚙️ Instalação

npm install --save @desco/vue-flip

Note 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