Sharing : Vue Component

[vcmirko]

The scss file needs to be created and where you load de original sass files. If you could publish this as part of the package ? Would be awesome. then I can just import it from npm. PM me if something is not clear.

<template>
  <transition name="slide-fade" appear>
    <div class="quickview is-active">
      <header class="quickview-header is-vcentered">
        <p class="has-text-weight-bold is-size-4">{{ title }}</p>
        <span class="delete" @click="$emit('close')"></span>
      </header>

      <div class="quickview-body">
        <div class="quickview-block p-4">
          <slot></slot>
        </div>
      </div>

      <footer v-if="footer" class="quickview-footer">
        <p>{{ footer }}</p>
      </footer>
    </div>
  </transition>
</template>
<script>
  import Vue from 'vue'
  import "../../public/assets/bulma_quickview.scss"
  export default{
    name:"BulmaButton",
    props:{
      title:{type:String},
      footer:{type:String}
    },
    data(){
      return  {

      }
    },methods:{
    }
  }
</script>
<style scoped>
.slide-fade-enter-active, .slide-fade-leave-active {
  transform: translateX(0%);
  transition: all 0.4s ease-in-out;
}
.slide-fade-enter, .slide-fade-leave-to {
  transform: translateX(100%);
}
</style>

Usage in vue :

    <BulmaQuickView v-if="showMe" title="My title" footer="My footer" @close="showMe=false">
        <!-- your body content here -->
    </BulmaQuickView>