Skip to content

A sizable, skinnable tile that provides a button for modal display of overflowed content when it's present

Notifications You must be signed in to change notification settings

wakecoder/preview-card

Repository files navigation

preview-card

A sizable, skinnable Vue.js card component that provides a button for modal display of overflowed content

Demo

View a demo at the wakecoder blog or check out the code in the example folder

Usage

Install, require (or import) and put in your HTML. NOTE: In most cases you will want to specify a height for the card so the front and back are the same size. This can be done via CSS. See below for more detail:

1. In a shell
npm install --save-dev preview-card
2. In your code
const Vue = require ('vue');
import previewCard from "preview-card/src/preview-card.vue";
const vue = new Vue ({
    el: "#app",
    data: {},
    components: {
        "preview-card": previewCard
    }
})
3. In your HTML
<preview-card transition="fade" style="height: 340px">
    <template slot="front" scope="ignore">
        Front content here
    </template>
    <template slot="back" scope="ignore">
        Back content here
    </template>
</preview-card>

About

A sizable, skinnable tile that provides a button for modal display of overflowed content when it's present

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published