vue-card v1.1.0

vue-card

A material design inspired card-reveal implementation - without styles.

Demo

Install

npm install --save-dev vue-card

or include build/bundle.js.

Usage

# in your component
components:
  "card": require("vue-card")
# or, when using bundle.js
components:
  "card": window.vueComps.card

<card>
  <img slot="img" src="..."></img>
  <span slot="title">The title</span>
  <p>The content</p>
  <span slot="revealTitle">The revealed title</span>
  <p slot="reveal">The revealed content</p>
</card>

For examples see dev/.

Props

slots

Events

Transition

You can provide a vue transition like this:

Vue.transition("fade",{
  // your transition
})
// or in the instance:
transitions: {
  fade: {
    // your transition
  }
}
// usage:
template: "<card transition='fade'></card>"

You can write to the reveal style in your hooks (remeber it needs a tick to get applied):

Velocity = require("velocity-animate")
beforeEnter: function() {
  height = this.$el.clientHeight
  this.rStyle.top = height + "px"
  this.rStyle.opacity = 0
  // content of this.rStyle overwrites content of this.revealStyle
},
enter: function(el,done) {
  this.$nextTick(function(){
    Velocity(el, {top: 0, opacity: 1},{
      duration: 1000,
      easing: "easeOutQuart",
      queue: false,
      complete: done
      })
  })
}

Changelog

• 1.1.0
  set default transition

• 1.0.0
  now using vue transitions
  events are renamed after vue transitions
  only using a single component now, with multiple slots
  added unit tests

Development

Clone repository.

npm install
npm run dev

Browse to http://localhost:8080/.

License

Copyright (c) 2016 Paul Pflugradt Licensed under the MIT license.