Dashboard Component

The dashboard component is helper component to manage the layout of titles, descriptions and controls for elements like tables, charts etc. within a dashboard.

Title and Description

Use the title prop or slot to set component title. If you want to set description use the description prop or slot to set component description.

<template>
  <ci-dashboard-component
    title="Title prop"
    description="Description prop"
  />
</template>

<template>
  <ci-dashboard-component>
    <span slot="title">
      Title slot
    </span>
    <span slot="description">
      Description slot
    </span>
  </ci-dashboard-component>
</template>

Controls

Use the controls-left or controls-right slot to set elements on top of default slot on left or right side.

<template>
  <ci-dashboard-component
    title="Title"
    description="Controls on left or right side"
  >
    <ci-button slot="controls-left">
      Left controls
    </ci-button>
    <ci-button
      variant="muted-outline"
      slot="controls-right"
    >
      Right controls
    </ci-button>
  </ci-dashboard-component>
</template>

Slots

The dasboard component uses named slots to render the different parts of helper component. You can use them to manually customize any part of component.

Slot	Description
title	renders at the top of the component
description	renders below title
controls-left	renders above default slot and is located on left side of control container
controls-right	renders above default slot and is located on right side of control container
default	renders at the bottom of the component

<template>
   <ci-dashboard-component>
    <span class="simple-slot" slot="title">
      Slot: title
    </span>
    <span class="simple-slot" slot="description">
      Slot: description
    </span>
    <div class="simple-slot" slot="controls-left">
      Slot: controls-left
    </div>
    <div class="simple-slot" slot="controls-right">
      Slot: controls-right
    </div>
    <div class="default-slot" slot="default">
      Slot: default
    </div>
  </ci-dashboard-component>
</template>
<style>
  .simple-slot, .default-slot {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background: #F5F5F5;
    border: 1px dashed #A6A6A6;
    border-radius: 3px;
    padding: 5px 10px;
    font-weight: 400;
    font-size: 13px;
  }

  .default-slot {
    height: 400px;
  }
</style>