Syncfusion AI Assistant

How can I help you?

Position sizing of panels in Vue Dashboard Layout component

5 Mar 202613 minutes to read

Panels are the basic building blocks of the Dashboard Layout component. They act as containers for the data to be visualized or presented. Panels can be positioned and resized to present content effectively.

The following table lists the available panel properties and their descriptions.

PanelObject Description
id Specifies the ID value of the panel.
row Specifies the row value in which the panel to be placed.
col Specifies the column value in which the panel to be placed.
sizeX Specifies the width of the panel in cells count.
sizeY Specifies the height of the panel in cells count.
minSizeX Specifies the minimum width of the panel in cells count.
minSizeY Specifies the minimum height of the panel in cells count.
maxSizeX Specifies the maximum width of the panel in cells count.
maxSizeY Specifies the maximum height of the panel in cells count.
header Specifies the header template of the panel.
content Specifies the content template of the panel.
cssClass Specifies the CSS class name that can be appended with each panel element.

Positioning of panels

Panels within the layout can be ordered using the row and col properties. Positioning panels is useful to present data in a desired order.

The following sample demonstrates positioning panels within the Dashboard Layout using the row and column properties.

<template>
  <div class="control-section">
    <!--  Dashboard Layout component declaration -->
    <ejs-dashboardlayout id='dashboard_default' :cellSpacing='cellSpacing' :columns="7">
      <e-panels>
        <e-panel :row="0" :col="0" content="<div class='content'>1</div>"></e-panel>
        <e-panel :row="0" :col="1" content="<div class='content'>2</div>"></e-panel>
        <e-panel :row="0" :col="2" content="<div class='content'>3</div>"></e-panel>
        <e-panel :row="1" :col="0" content="<div class='content'>4</div>"></e-panel>
        <e-panel :row="1" :col="1" content="<div class='content'>5</div>"></e-panel>
        <e-panel :row="1" :col="2" content="<div class='content'>6</div>"></e-panel>
      </e-panels>
    </ejs-dashboardlayout>
    <!-- end of Dashboard Layout component -->
  </div>
</template>

<script setup>

  // Import syncfusion Dashboard Layout component from layouts package
  import { DashboardLayoutComponent as EjsDashboardlayout, PanelDirective as EPanel, PanelsDirective as EPanels } from "@syncfusion/ej2-vue-layouts";

  const cellSpacing = [20, 20];

</script>

<style>
  @import "../node_modules/@syncfusion/ej2-base/styles/material3.css";
  @import "../node_modules/@syncfusion/ej2-vue-layouts/styles/material3.css";

  .control-section {
    height: 395px;
  }

  #dashboard_default .e-panel .e-panel-container .content {
    vertical-align: middle;
    font-weight: 600;
    font-size: 20px;
    text-align: center;
    line-height: 100px;
  }

  #dashboard_default .e-panel {
    transition: none !important;
  }
</style>
<template>
  <div class="control-section">
    <!--  Dashboard Layout component declaration -->
    <ejs-dashboardlayout id='dashboard_default' :cellSpacing='cellSpacing' :columns="7">
      <e-panels>
        <e-panel :row="0" :col="0" content="<div class='content'>1</div>"></e-panel>
        <e-panel :row="0" :col="1" content="<div class='content'>2</div>"></e-panel>
        <e-panel :row="0" :col="2" content="<div class='content'>3</div>"></e-panel>
        <e-panel :row="1" :col="0" content="<div class='content'>4</div>"></e-panel>
        <e-panel :row="1" :col="1" content="<div class='content'>5</div>"></e-panel>
        <e-panel :row="1" :col="2" content="<div class='content'>6</div>"></e-panel>
      </e-panels>
    </ejs-dashboardlayout>
    <!-- end of Dashboard Layout component -->
  </div>
</template>

<script>

  // Import syncfusion Dashboard Layout component from layouts package
  import { DashboardLayoutComponent, PanelDirective, PanelsDirective } from "@syncfusion/ej2-vue-layouts";

  export default {
    name: "App",
    components: {
      "ejs-dashboardlayout": DashboardLayoutComponent,
      "e-panels": PanelsDirective,
      "e-panel": PanelDirective
    },

    data: function () {
      return {
        cellSpacing: [20, 20]
      };
    }
  }
</script>

<style>
  @import "../node_modules/@syncfusion/ej2-base/styles/material3.css";
  @import "../node_modules/@syncfusion/ej2-vue-layouts/styles/material3.css";

  .control-section {
    height: 395px;
  }

  #dashboard_default .e-panel .e-panel-container .content {
    vertical-align: middle;
    font-weight: 600;
    font-size: 20px;
    text-align: center;
    line-height: 100px;
  }

  #dashboard_default .e-panel {
    transition: none !important;
  }
</style>

Sizing of panels

A panel’s size can be adjusted by defining the sizeX and sizeY properties. The sizeX property defines the width and the sizeY property defines height of a panel in cell count. These properties help design dashboards where panel content varies in size.

The following sample demonstrates the sizing of panels within the dashboard layout using the sizeX and sizeY properties of the panels.

<template>
  <div class="control-section">
    <ejs-dashboardlayout id='dashboard_default' :columns="7">
      <e-panels>
        <e-panel :sizeX="1" :sizeY="1" :row="0" :col="0" content="<div class='content'>0</div>"></e-panel>
        <e-panel :sizeX="3" :sizeY="2" :row="0" :col="1" content="<div class='content'>1</div>"></e-panel>
        <e-panel :sizeX="1" :sizeY="3" :row="0" :col="4" content="<div class='content'>2</div>"></e-panel>
        <e-panel :sizeX="1" :sizeY="1" :row="1" :col="0" content="<div class='content'>3</div>"></e-panel>
        <e-panel :sizeX="2" :sizeY="1" :row="2" :col="0" content="<div class='content'>4</div>"></e-panel>
        <e-panel :sizeX="1" :sizeY="1" :row="2" :col="2" content="<div class='content'>5</div>"></e-panel>
        <e-panel :sizeX="1" :sizeY="1" :row="2" :col="3" content="<div class='content'>6</div>"></e-panel>
      </e-panels>
    </ejs-dashboardlayout>
  </div>
</template>

<script setup>

  // Import syncfusion Dashboard Layout component from layouts package
  import { DashboardLayoutComponent as EjsDashboardlayout, PanelDirective as EPanel, PanelsDirective as EPanels } from "@syncfusion/ej2-vue-layouts";

</script>

<style>
  @import "../node_modules/@syncfusion/ej2-base/styles/material3.css";
  @import "../node_modules/@syncfusion/ej2-vue-layouts/styles/material3.css";

  .control-section {
    height: 395px;
  }

  #dashboard_default .e-panel .e-panel-container .content {
    vertical-align: middle;
    font-weight: 600;
    font-size: 20px;
    text-align: center;
    line-height: 100px;
  }

  #dashboard_default .e-panel {
    transition: none !important;
  }
</style>
<template>
  <div class="control-section">
    <ejs-dashboardlayout id='dashboard_default' :columns="7">
      <e-panels>
        <e-panel :sizeX="1" :sizeY="1" :row="0" :col="0" content="<div class='content'>0</div>"></e-panel>
        <e-panel :sizeX="3" :sizeY="2" :row="0" :col="1" content="<div class='content'>1</div>"></e-panel>
        <e-panel :sizeX="1" :sizeY="3" :row="0" :col="4" content="<div class='content'>2</div>"></e-panel>
        <e-panel :sizeX="1" :sizeY="1" :row="1" :col="0" content="<div class='content'>3</div>"></e-panel>
        <e-panel :sizeX="2" :sizeY="1" :row="2" :col="0" content="<div class='content'>4</div>"></e-panel>
        <e-panel :sizeX="1" :sizeY="1" :row="2" :col="2" content="<div class='content'>5</div>"></e-panel>
        <e-panel :sizeX="1" :sizeY="1" :row="2" :col="3" content="<div class='content'>6</div>"></e-panel>
      </e-panels>
    </ejs-dashboardlayout>
  </div>
</template>

<script>

  // Import syncfusion Dashboard Layout component from layouts package
  import { DashboardLayoutComponent, PanelDirective, PanelsDirective } from "@syncfusion/ej2-vue-layouts";  export default {
    name: "App",
    components: {
      "ejs-dashboardlayout": DashboardLayoutComponent,
      "e-panels": PanelsDirective,
      "e-panel": PanelDirective,

    },
    data: function () {
      return {
      };
    }
  }
</script>

<style>
  @import "../node_modules/@syncfusion/ej2-base/styles/material3.css";
  @import "../node_modules/@syncfusion/ej2-vue-layouts/styles/material3.css";

  .control-section {
    height: 395px;
  }
  
  #dashboard_default .e-panel .e-panel-container .content {
    vertical-align: middle;
    font-weight: 600;
    font-size: 20px;
    text-align: center;
    line-height: 100px;
  }

  #dashboard_default .e-panel {
    transition: none !important;
  }
</style>

Refer to the Vue Dashboard Layout feature tour page for its groundbreaking feature representations. Also explore the Vue Dashboard Layout example to learn how to present and manipulate data.