@shapla/vue-dashboard v1.0.0

Shapla Dashboard

A simple dashboard layout to build your app dashboard for Vue 3

Table of contents

• Installation
• Usage

Installation

npm install --save @shapla/vue-dashboard

Usage

Styles

with Sass:

import '@shapla/vue-dashboard/src/index.scss';

with CSS:

import '@shapla/vue-dashboard/dist/style.css';

Javascript Instantiation

import ShaplaDashboard from '@shapla/vue-dashboard';

export default {
  name: 'Hello',

  components: {
    ShaplaDashboard
  },

  data() {
    return {
      activateSideNav: false,
    }
  },

  computed: {
    menuItems() {
      return Array.from({length: 50}, (x, i) => i + 1);
    }
  }
}

<shapla-dashboard
  title="Dashboard"
  :activate-side-nav="activateSideNav"
  @open:sidenav="activateSideNav = true"
  @close:sidenav="activateSideNav = false"
  user-display-name="Sayful Islam"
  avatar-url="https://s.gravatar.com/avatar/5ba82fcf5f7f8b24097ff9f7ad4b3d5b?s=80"
  greeting="Hello,"
>
  <template v-slot:sidenav-menu>
    <ul class="sidenav-list">
      <li class="sidenav-list__item" v-for="number in menuItems">
        <a class="sidenav-list__link" href="#">Menu item {{number}}</a>
      </li>
    </ul>
  </template>

  <p v-for="number in menuItems">{{number}}. Dashboard Content will go here</p>
</shapla-dashboard>

Props

Listeners

The dashboard layout component fires the following events:

open:sidenav: When burger icon is clicked, it fires the event. close:sidenav: When outside of sidenav is clicked, it fires the event.

<!-- template -->
<shapla-dashboard @open:sidenav="handleOpenSidenav" @close:sidenav="handleCloseSidenav"/>

<!-- method -->
methods: {
  handleOpenSidenav(){
    // Handle click event
  },
  handleCloseSidenav(){
    // Handle click event
  }
}