Skip to content

Latest commit

 

History

History
121 lines (104 loc) · 2.72 KB

README.md

File metadata and controls

121 lines (104 loc) · 2.72 KB
Raw

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.