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:

• VueJS;
• PUG/JADE;
• SASS/SCSS;

⚙️ 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

Autor