0.1.6 • Published 2 years ago
vue-dashboard-grid v0.1.6
Vue 3 + Vue CLI UI
This template should help get you started developing with Vue 3 in Vue CLI UI. You can also create and manage projects using a graphical interface with the vue ui command:
$vue ui
Check out the script setup docs to learn more.
Recommended IDE Setup
vue-dashboard-grid
A pre determinate grid to build dashboards with any type of contents, like charts, images, web views, SVG, etc...
Installation
$ npm install vue-dashboard-grid@latest
Git
Documents
How to use in Vue
<template>
<DashboardGrid
:ref="grid"
:cols=this.cols
:rows=this.rows
:margin=this.margin
:backgroundColor=this.backgroundColor
:placeHolderBackground=this.placeHolderBackground
:showGridItens="true"
/>
</template>
<script>
import DashboardGrid from 'vue-dashboard-grid'
export default {
name: "App",
components:{
DashboardGrid
},
data: () => ({
cols: 8,
rows: 6,
margin:[4, 4],
backgroundColor: '#E4E4E4',
placeHolderBackground:'#C6F3DF'
}),
methods: {
initGrid(){
this.$refs.grid.addNewElement(1, 0, 0, 2, 1 ,'');
this.$refs.grid.addNewElement(2, 1, 0, 2, 1 ,'');
this.$refs.grid.addNewElement(3, 3, 0, 1, 1 ,'');
this.$refs.grid.addNewElement(4, 0, 3, 3, 3 ,'');
this.$refs.grid.addNewElement(5, 4, 3, 1, 1 ,'');
}
},
mounted(){
this.$nextTick(function () {
this.initGrid();
})
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 20px;
}
</style>
Show Dashboard Example
Next Example - Make Beauty Dashboards
0.1.0
2 years ago
0.1.2
2 years ago
0.1.1
2 years ago
0.1.4
2 years ago
0.1.3
2 years ago
0.1.6
2 years ago
0.1.5
2 years ago
0.0.15
2 years ago
0.0.16
2 years ago
0.0.14
2 years ago
0.0.13
2 years ago
0.0.12
2 years ago
0.0.11
2 years ago
0.0.10
2 years ago
0.0.9
2 years ago
0.0.8
2 years ago
0.0.6
2 years ago
0.0.5
2 years ago
0.0.4
2 years ago
0.0.3
2 years ago
0.0.2
2 years ago
0.0.1
2 years ago
0.0.0
2 years ago