Flexible Card Component For Vue – smart-widget

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:

Flexible Card Component For Vue - smart-widget

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
Tags:

Add Comment