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

Name | type | default | description ---:| --- | ---| --- z-index | Number | 50 | z-index of the div transition | String | "card" | name of a vue transition. Detailed description revealStyle | Object / String | {} | style which will be passed down to reavel div is-opened | Boolean | false | (two-way) set to open / close

slots

Name | description ---:| --- default | content title | will reveal on click img | above title. will reveal on click reveal | content of reveal revealTitle | title of reveal. If absent, reveal will be disabled. action | action div below

Events

Name | description ---:| --- before-enter | will be called before open animation after-enter | will be called when opened before-leave | will be called before close animation after-leave | will be called when closed toggled(isOpened:Boolean) | emitted when gets opened or closed. Alternative to use two-way is-opened prop

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.