Smart widget is a flexible and extensible content container component. It includes header and body part, and widget body includes editbox、content、footer. If you use with grid, it also have a draggable and resizable grid layout, base on Vue2.5.+ & vue-grid-layout.
npm i vue-smart-widget -S
Install all the components:
import Vue from 'vue'
import VueSmartWidget from 'vue-smart-widget'
Vue.use(VueSmartWidget)
Use widget only:
import Vue from 'vue'
import { SmartWidget } from 'vue-smart-widget'
Vue.component('SmartWidget', SmartWidget)
The SmartWidget is heavily base on vue-grid-layout, you can know about vue-grid-layout
first, maybe you already use in your project.
Html
<smart-widget title="Default Widget">
<p>
It's defalut widget.
</p>
</smart-widget>
import Vue from 'vue'
import { SmartWidgetGrid } from 'vue-smart-widget'
Vue.component('SmartWidgetGrid', SmartWidgetGrid)
Script
new Vue({
data () {
return {
layout: [
{ x: 0, y: 0, w: 4, h: 4, i: '0' },
{ x: 4, y: 0, w: 4, h: 4, i: '1' },
{ x: 8, y: 0, w: 4, h: 4, i: '2' }
]
}
}
})
Html
<smart-widget-grid :layout="layout">
<smart-widget slot="0" simple>
<div class="layout-center">
<h3>Simple Widget Without Header</h3>
</div>
</smart-widget>
<smart-widget slot="1" title="Default Widget">
<div class="layout-center">
<h3>Default Widget With Header</h3>
</div>
</smart-widget>
<smart-widget slot="2" title="Full Screen" fullscreen>
<div class="layout-center">
<h3>Make any widget full screen</h3>
</div>
</smart-widget>
</smart-widget-grid>
Attribute | Description | Type | Accepted values | Default |
---|---|---|---|---|
slot | Widget slot, the unique identifier of the widget. refer to SmartWidgetGrid Props |
String | - | - |
title | Widget Header Title | String | - | - |
subTitle | Widget Header Sub Title | String | - | - |
padding | padding in Widget Body | [Number, Array] | - | [12, 20] |
simple | Widget without Header | Boolean | true or false |
false |
loading | determine whether it’s loading | Boolean | true or false |
false |
fullscreen | determine whether have fullscreen button | Boolean | true or false |
false |
collapse | determine whether have collapse button, only support smart-widget |
Boolean | true or false |
false |
refresh | determine whether have refresh button | Boolean | true or false |
false |
fixedHeight | determine whether widget body’s height is fixed, only support smart-widget |
Boolean | true or false |
false |
shadow | when to show card shadows | String | always 、hover 、never |
always |
translateY | the length of vertically transform | Number | - | 0 |
isActived | determine whether widget is actived | Boolean | true or false |
false |
activedColor | the actived widget box-shadow color, usually used with isActived attribute |
String | hex color | #0076db |
headerHeight | Widget Header Height(px) | Number | - | 48 |
Name | Description | Parameters |
---|---|---|
move | Every time an item is being moved and changes position | (i, newX, newY) |
moved | Every time an item is finished being moved and changes position | (i, newX, newY) |
resize | Every time an item is being resized and changes size | (i, newH, newW, newHPx, newWPx) |
resized | Every time an item is finished being moved and changes position | (i, newH, newW, newHPx, newWPx) |
container-resized | Every time the grid item/layout container changes size (browser window or other) | (i, newH, newW, newHPx, newWPx) |
on-refresh | Used when the widget need fetching data from ajax methods, usually used with loading attribute |
- |
before-fullscreen | Used when the widget before fullscreen, usually used with fullscreen attribute |
true or false |
on-fullscreen | Used when the widget is already fullscreen, usually used with fullscreen attribute |
true or false |
Name | Description |
---|---|
.smartwidget |
The main selector in SmartWidget |
.is-actived |
The state of widget is actived |
it’s similar with vue-grid-layout. Care about the attribute
layout
, The value of layout must be an Array of Object items. Each item must have i, x, y, w and h proprties. especially, the i proprties, it’s the unique identifier of the widget item, euqal with widget slot.
Attribute | Description | Type | Accepted values | Default |
---|---|---|---|---|
layout | This is the initial layout of the grid. | Array | - | required |
colNum | Says how many columns the grid has. | Number | - | 12 |
rowHeight | Says what is a height of a single row in pixels. | Number | - | 48 |
margin | Says what are the margins of elements inside the grid. | Array | - | [10, 10] |
draggable | Says if the grids items are draggable. | Boolean | true or false |
true |
resizable | Says if the grids items are resizable. | Boolean | true or false |
true |
isStatic | Control all widgets won’t be draggable, resizable or moved | Boolean | true or false |
false |
Each widget in the grid is resizable,
slot-scope
provide the widget attribute to the children component.
Name | Description | Type |
---|---|---|
contentH | Provide the widget body content(widget-body__content ) height |
Number |
Name | Description | Parameters |
---|---|---|
layout-created | Emited on the component created lifecycle hook | newLayout |
layout-before-mount | Emited on the component beforeMount lifecycle hook | newLayout |
layout-mounted | Emited on the component mounted lifecycle hook | newLayout |
layout-ready | Emited when all the operations on the mount hook finish | newLayout |
layout-updated | Every time the layout has finished updating and positions of all grid-items are recalculated | newLayout |
Author: xiaoluoboding
Live Demo: https://xiaoluoboding.github.io/vue-smart-widget/
GitHub: https://github.com/xiaoluoboding/vue-smart-widget
#vuejs #javascript #vue #vue-js