Flexible Card Component For Vue - smart-widget

Install & Download:

# NPM
$ npm install vue-smart-widget --save

Description:

smart-widget is a Vue.js component which helps you generate card style widgets on the web app.

It also works with the vue-grid-layout library that makes the widgets draggable and resizable for a grid layout.

Basic usage:

Import the component.

import VueSmartWidget from 'vue-smart-widget'
Vue.use(VueSmartWidget)

The HTML for the smart widget.

<smart-widget title="My Widget">
  <p>
    It's defalut widget.
  </p>
</smart-widget>

Possible props.

// the unique identifier of the widget
slot: 0,
// widget title
title: String,
// sub-title
subTitle: String,
// set `widget-body__content` padding style
padding: { type: [Number, Array], default: () => [12, 20] },
// toggle widget mode
simple: { type: Boolean, default: false },
// toggle loading mask
loading: { type: Boolean, default: false },
// toggle fullscreen button
fullscreen: { type: Boolean, default: false },
// toggle collapse button
collapse: { type: Boolean, default: false },
// toggle refresh button
refresh: { type: Boolean, default: false },
// toggle `widget-body__content` fixed height
fixedHeight: { type: Boolean, default: false },
// when to show card shadows
shadow: { type: String, default: 'always' },
// the card translateY style
translateY: { type: Number, default: 0 }