preview-card
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>
Dependencies
Dependencies
autoprefixer: ^6.7.2babel-core: ^6.22.1babel-eslint: ^7.1.1babel-loader: ^6.2.10babel-plugin-transform-runtime: ^6.22.0babel-preset-env: ^1.3.2babel-preset-stage-2: ^6.22.0babel-register: ^6.22.0chalk: ^1.1.3connect-history-api-fallback: ^1.3.0copy-webpack-plugin: ^4.0.1css-loader: ^0.28.0eslint: ^3.19.0eslint-friendly-formatter: ^2.0.7eslint-loader: ^1.7.1eslint-plugin-html: ^2.0.0eslint-config-standard: ^6.2.1eslint-plugin-promise: ^3.4.0eslint-plugin-standard: ^2.0.1eventsource-polyfill: ^0.9.6express: ^4.14.1extract-text-webpack-plugin: ^2.0.0file-loader: ^0.11.1friendly-errors-webpack-plugin: ^1.1.3html-webpack-plugin: ^2.28.0http-proxy-middleware: ^0.17.3webpack-bundle-analyzer: ^2.2.1cross-env: ^4.0.0karma: ^1.4.1karma-coverage: ^1.1.1karma-mocha: ^1.3.0karma-phantomjs-launcher: ^1.0.2karma-phantomjs-shim: ^1.4.0karma-sinon-chai: ^1.3.1karma-sourcemap-loader: ^0.3.7karma-spec-reporter: 0.0.30karma-webpack: ^2.0.2lolex: ^1.5.2mocha: ^3.2.0chai: ^3.5.0sinon: ^2.1.0sinon-chai: ^2.8.0inject-loader: ^3.0.0babel-plugin-istanbul: ^4.1.1phantomjs-prebuilt: ^2.1.14semver: ^5.3.0shelljs: ^0.7.6opn: ^4.0.2optimize-css-assets-webpack-plugin: ^1.3.0ora: ^1.2.0rimraf: ^2.6.0url-loader: ^0.5.8vue-loader: ^11.3.4vue-style-loader: ^2.0.5vue-template-compiler: ^2.2.6webpack: ^2.3.3webpack-dev-middleware: ^1.10.0webpack-hot-middleware: ^2.18.0webpack-merge: ^4.1.0