Dashboard

A Dashboard is a fullscreen application with a Sidebar, Page and optionally an Iconbar.

The Dashboard component is intended to be the primary component of every dashboard application, because it provides API's for overlays like Blades and arranges the Sidebar, Page and Iconbar into the proper layout.

Usage

The Dashboard component will automatically position the sidebar and page. Dashboard Sidebar and Dashboard Page are required child components.

Click here to view a demo fullsceen.

<template>
  <ci-dashboard>
    <ci-dashboard-page title="Page Title">
      <p v-for="n in 10">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam posuere et velit ut mattis. Suspendisse vitae maximus neque. Donec at gravida metus. Nullam condimentum imperdiet dolor sed dapibus. Nullam porta porttitor massa, ac feugiat est. Morbi congue nec neque ullamcorper rhoncus. Donec faucibus malesuada diam, vitae facilisis dolor ultricies eget. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce vestibulum ex sagittis, tincidunt mi ac, mollis sapien. Phasellus nunc quam, facilisis in auctor a, hendrerit id purus. Vivamus vel dolor rhoncus, elementum libero ut, ullamcorper nibh.
      </p>
    </ci-dashboard-page>
  </ci-dashboard>
</template>
<script>
export default {
  data () {
    return {
    }
  }
}
</script>

Iconbar

You can add an Iconbar to your dashboard if desired.

Click here to view a demo fullsceen.

<template>
  <ci-dashboard>
    <ci-dashboard-page title="Page Title">
      <p v-for="n in 10">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam posuere et velit ut mattis. Suspendisse vitae maximus neque. Donec at gravida metus. Nullam condimentum imperdiet dolor sed dapibus. Nullam porta porttitor massa, ac feugiat est. Morbi congue nec neque ullamcorper rhoncus. Donec faucibus malesuada diam, vitae facilisis dolor ultricies eget. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce vestibulum ex sagittis, tincidunt mi ac, mollis sapien. Phasellus nunc quam, facilisis in auctor a, hendrerit id purus. Vivamus vel dolor rhoncus, elementum libero ut, ullamcorper nibh.
      </p>
    </ci-dashboard-page>
    <ci-iconbar
      v-model="iconbar.selection"
      :icons=iconbar.items
    />
  </ci-dashboard>
</template>
<script>
export default {
  data () {
    return {
      iconbar: {
        selection: null,
        items: [
          'clock',
          'people-group',
          'file',
          'lock'
        ],
      }
    }
  }
}
</script>