The following section explains the required steps to build the simple DashboardLayout
component with its basic usage in step-by-step procedure.
System requirements for Syncfusion Vue UI components
The following list of dependencies is required to use the DashboardLayout component in your application.
|-- @syncfusion/ej2-vue-layouts
|-- @syncfusion/ej2-vue-base
|-- @syncfusion/ej2-base
|-- @syncfusion/ej2-layouts
Vue CLI
to setup your vue applications. To install Vue CLI use the following command.npm install -g @vue/cli
npm install -g @vue/cli-init
vue init webpack-simple quickstart
cd quickstart
npm install
All the available Essential JS 2 packages are published in npmjs.com
registry.
You can choose the component that you want to install. For this application, we are going to use the DashboardLayout component.
To install DashboardLayout
component, use the following command
npm install @syncfusion/ej2-vue-layouts -–save
Two ways are available for registering the Vue Component. They are as follows.
Import the Component Plugin from the EJ2 Vue Package and register the same using Vue.use() with Component Plugin as its argument.
Refer the code snippet given below.
import { DashboardLayoutPlugin } from '@syncfusion/ej2-vue-layouts';
Vue.use(DashboardLayoutPlugin);
By Registering Component Plugin in Vue, all child directives are also globally registered.
Import the DashboardLayout
Component from EJ2 Vue Package, register the same using the Vue.component() with name of Component from ComponentPlugin and the EJ2 Vue Component as its arguments.
Refer the code snippet given below.
import { DashboardLayoutComponent, DashboardLayoutPlugin } from '@syncfusion/ej2-vue-layouts';
Vue.component(DashboardLayoutPlugin.name, DashboardLayoutComponent);
Note: By using Vue.component(), only the EJ2 Vue Component is registered. Child directives needs to be registered separately.
You can render the DashboardLayout
component in the following two ways.
<template>
.panels
property in <e-panels>
.panels
property using HTML attributesAdd the HTML div element into the <template>
section of the App.vue
file in src directory, the content attribute of the Splitter component is provided as name in data option in the <script>
section.
<template>
<div>
<div class="control-section">
<!-- DashboardLayout element declaration -->
<ejs-dashboardlayout id='defaultLayout' :cellSpacing="spacing" :columns="6">
<div id="one" class="e-panel" data-row="0" data-col="0" data-sizeX="1" data-sizeY="1">
<div class="e-panel-container">
<div class="text-align">
<div>0</div>
</div>
</div>
</div>
<div id="two" class="e-panel" data-row="1" data-col="0" data-sizeX="1" data-sizeY="2">
<div class="e-panel-container">
<div class="text-align">
<div>1</div>
</div>
</div>
</div>
<div id="three" class="e-panel" data-row="0" data-col="1" data-sizeX="2" data-sizeY="2">
<div class="e-panel-container">
<div class="text-align">
<div>2</div>
</div>
</div>
</div>
<div id="four" class="e-panel" data-row="2" data-col="1" data-sizeX="1" data-sizeY="1">
<div class="e-panel-container">
<div class="text-align">
<div>3</div>
</div>
</div>
</div>
<div id="five" class="e-panel" data-row="2" data-col="2" data-sizeX="2" data-sizeY="1">
<div class="e-panel-container">
<div class="text-align">
<div>4</div>
</div>
</div>
</div>
<div id="six" class="e-panel" data-row="0" data-col="3" data-sizeX="1" data-sizeY="1">
<div class="e-panel-container">
<div class="text-align">
<div>5</div>
</div>
</div>
</div>
<div id="seven" class="e-panel" data-row="1" data-col="3" data-sizeX="1" data-sizeY="1">
<div class="e-panel-container">
<div class="text-align">
<div>6</div>
</div>
</div>
</div>
<div id="eight" class="e-panel" data-row="0" data-col="4" data-sizeX="1" data-sizeY="3">
<div class="e-panel-container">
<div class="text-align">
<div>7</div>
</div>
</div>
</div>
</ejs-dashboardlayout>
<!-- end of dashboardlayout element -->
</div>
</div>
</template>
<script>
import Vue from "vue";
// Import syncfusion dashboardlayout component from layouts package
import { DashboardLayoutPlugin } from "@syncfusion/ej2-vue-layouts";
Vue.use(DashboardLayoutPlugin);
export default {
data: function() {
return {
count: 8,
spacing: [10,10]
};
}
}
</script>
To render the DashboardLayout component, need to import Layouts and its dependent component’s styles as given below in <style>
section of the App.vue
file.
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-layouts/styles/material.css";
</style>
Note: If you want to refer the combined component styles, please make use of our CRG
(Custom Resource Generator) in your application.
Now run the npm run dev
command in the console, it will build your application and open in the browser.
<template>
<div>
<div class="control-section">
<!-- DashboardLayout element declaration -->
<ejs-dashboardlayout id='defaultLayout' :cellSpacing="spacing" :columns="6">
<div id="one" class="e-panel" data-row="0" data-col="0" data-sizeX="1" data-sizeY="1">
<div class="e-panel-container">
<div class="text-align">
<div>0</div>
</div>
</div>
</div>
<div id="two" class="e-panel" data-row="1" data-col="0" data-sizeX="1" data-sizeY="2">
<div class="e-panel-container">
<div class="text-align">
<div>1</div>
</div>
</div>
</div>
<div id="three" class="e-panel" data-row="0" data-col="1" data-sizeX="2" data-sizeY="2">
<div class="e-panel-container">
<div class="text-align">
<div>2</div>
</div>
</div>
</div>
<div id="four" class="e-panel" data-row="2" data-col="1" data-sizeX="1" data-sizeY="1">
<div class="e-panel-container">
<div class="text-align">
<div>3</div>
</div>
</div>
</div>
<div id="five" class="e-panel" data-row="2" data-col="2" data-sizeX="2" data-sizeY="1">
<div class="e-panel-container">
<div class="text-align">
<div>4</div>
</div>
</div>
</div>
<div id="six" class="e-panel" data-row="0" data-col="3" data-sizeX="1" data-sizeY="1">
<div class="e-panel-container">
<div class="text-align">
<div>5</div>
</div>
</div>
</div>
<div id="seven" class="e-panel" data-row="1" data-col="3" data-sizeX="1" data-sizeY="1">
<div class="e-panel-container">
<div class="text-align">
<div>6</div>
</div>
</div>
</div>
<div id="eight" class="e-panel" data-row="0" data-col="4" data-sizeX="1" data-sizeY="3">
<div class="e-panel-container">
<div class="text-align">
<div>7</div>
</div>
</div>
</div>
</ejs-dashboardlayout>
<!-- end of dashboardlayout element -->
</div>
</div>
</template>
<script>
import Vue from "vue";
// Import syncfusion dashboardlayout component from layouts package
import { DashboardLayoutPlugin } from "@syncfusion/ej2-vue-layouts";
Vue.use(DashboardLayoutPlugin);
export default {
data: function() {
return {
count: 8,
spacing: [10,10]
};
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-layouts/styles/material.css";
/* DashboardLayout element styles */
#defaultLayout .e-panel .e-panel-container {
vertical-align: middle;
font-weight: 600;
font-size: 20px;
text-align: center;
}
.text-align {
line-height: 80px;
}
#defaultLayout .e-panel {
transition:none !important;
}
</style>
panels
property using helperYou can render the DashboardLayout component by using the panels property through <e-panels>
.
<template>
<div>
<div class="control-section">
<!-- DashboardLayout element declaration -->
<ejs-dashboardlayout id="defaultLayout" :cellSpacing="spacing" :columns="6">
<e-panels>
<e-panel :row="0" :col="0" :sizeX="1" :sizeY="1" content="<div class='panel-content'>0</div>"></e-panel>
<e-panel :row="0" :col="1" :sizeX="3" :sizeY="2" content="<div class='panel-content'>1</div>"></e-panel>
<e-panel :row="0" :col="4" :sizeX="1" :sizeY="3" content="<div class='panel-content'>2</div>"></e-panel>
<e-panel :row="1" :col="0" :sizeX="1" :sizeY="1" content="<div class='panel-content'>3</div>"></e-panel>
<e-panel :row="2" :col="0" :sizeX="2" :sizeY="1" content="<div class='panel-content'>4</div>"></e-panel>
<e-panel :row="2" :col="2" :sizeX="1" :sizeY="1" content="<div class='panel-content'>5</div>"></e-panel>
<e-panel :row="2" :col="3" :sizeX="1" :sizeY="1" content="<div class='panel-content'>6</div>"></e-panel>
</e-panels>
</ejs-dashboardlayout>
<!-- end of dashboardlayout element -->
</div>
</div>
</template>
<script>
import Vue from "vue";
// Import syncfusion dashboardlayout component from layouts package
import { DashboardLayoutPlugin } from "@syncfusion/ej2-vue-layouts";
Vue.use(DashboardLayoutPlugin);
export default {
data: function() {
return {
spacing: [10,10]
};
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-layouts/styles/material.css";
/* DashboardLayout element styles */
#defaultLayout .e-panel .e-panel-container {
vertical-align: middle;
font-weight: 600;
font-size: 20px;
text-align: center;
}
.panel-content {
line-height: 80px;
}
#defaultLayout .e-panel {
transition:none !important;
}
</style>
You can refer to our Vue Dashboard Layout feature tour page for its groundbreaking feature representations. You can also explore our Vue Dashboard Layout example to knows how to present and manipulate data.