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