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 }
Preview:
Changelog:
v0.6.1 (01/07/2021)
- update
v0.6.0 (01/04/2021)
- add new properties & events on smart-widget-grid
Download Details:
Author: xiaoluoboding
Live Demo: https://xiaoluoboding.github.io/vue-smart-widget/#/home
Download Link: https://github.com/xiaoluoboding/vue-smart-widget/archive/master.zip
Official Website: https://github.com/xiaoluoboding/vue-smart-widget
Install & Download:
# NPM
$ npm install vue-smart-widget --save