Dashboard Page

The dashboard page component is the primary component of every dashboard view and sets up the title, actions and content of a page.

Title

Use the title prop or slot to set page title. Titles are required.

<template>
  <ci-dashboard-page title="Page Title" />
</template>

Breadcrumb

Use the breadcrumb slot to set content above page title.

<template>
  <ci-dashboard-page>
    <template #title>
      <div class="ci-text-h2">
        This is slot title
      </div>
    </template>
    <template #breadcrumb>
      This is breadcrumb slot
    </template>
  </ci-dashboard-page>
</template>

Notices

Use the notices slot to set notices in the header. Use the default slot to set main content of the page.

<template>
  <ci-dashboard-page>
    <template #notices>
      <div class="notices">
        test notice
      </div>
    </template>
    <template #title>
      Page Title
    </template>
    <template #actions>
      <div class="dashboard-page__actions">
        <ci-input v-model="inputField" />
        <ci-button class="dashboard-page__action-button">
          Button
        </ci-button>
      </div>
    </template>
    <template #default>
      Main content goes here.
    </template>
  </ci-dashboard-page>
</template>
<script>
export default {
  data () {
    return {
      inputField: ''
    }
  }
}
</script>
<style>
.dashboard-page__actions {
  display: flex;
  margin-left: auto;
}

.dashboard-page__action-button {
  margin-left: 5px;
}

.notices {
  height:40px;
  background-color: #7CB342;
  text-align: center;
  align-content: center;
}
</style>

Flexible usage

Use the actions slot to set header actions (search box, buttons, etc.). Use the default slot to set main content of the page. Use the notices slot to set notices in the header.

<template>
  <ci-dashboard-page>
    <template #notices>
      <div class="notices-no-margin">
        test notice
      </div>
    </template>
    <template #title>
      Page Title
    </template>
    <template #actions>
      <div class="dashboard-page__actions">
        <ci-input v-model="inputField" />
        <ci-button class="dashboard-page__action-button">
          Button
        </ci-button>
      </div>
    </template>
    <template #default>
      Main content goes here.
    </template>
  </ci-dashboard-page>
</template>
<script>
export default {
  data () {
    return {
      inputField: ''
    }
  }
}
</script>
<style>
.dashboard-page__actions {
  display: flex;
  margin-left: auto;
}

.dashboard-page__action-button {
  margin-left: 5px;
}

.notices-no-margin {
  height:40px;
  background-color: #7CB342;
  text-align: center;
  align-content: center;
}
</style>