Layout Screenshots

Web Design

Tablet Design

Mobile Design

Documentation

Basic Usage

<template>
  <div id="app">
    <IstDashboardLayout>
      // do something here
      Hello World
    </IstDashboardLayout>
  </div>
</template>

<script>
import IstDashboardLayout from 'istanvue-dashboard-layout'
export default {
  name: 'App',
  components: {
    IstDashboardLayout
  }
}
</script>

Advanced Usage

<template>
  <div id="app">
    <IstDashboardLayout
      :logo="logo"
      :side-bar-items="sideBarItems"
      :profile-dropdown-items="profileDropdownItems"
      router-type="router-link"
      logout-text="Sign out"
      title="Home Page"
      :profile-image="profileImage"
      :profile-full-name="profileFullName"
      :copyright="copyright"
    >
      <div class="ist-row">
        <div class="ist-col-sm-24 ist-col-md-12 ist-col-lg-24 ist-border-primary ist-card ist-flex-center"> Ist-Col-Sm-24 Ist-Col-Md-12 Ist-Col-Lg-24 </div>
        <div class="ist-col-sm-24 ist-col-md-12 ist-col-lg-12 ist-border-primary ist-card ist-flex-center"> Ist-Col-Sm-24 Ist-Col-Md-12 Ist-Col-Lg-12 </div>
        <div class="ist-col-sm-24 ist-col-md-12 ist-col-lg-12 ist-border-primary ist-card ist-flex-center"> Ist-Col-Sm-24 Ist-Col-Md-12 Ist-Col-Lg-12 </div>
        <div class="ist-col-sm-24 ist-col-md-12 ist-col-lg-8 ist-border-primary ist-card ist-flex-center"> Ist-Col-Sm-24 Ist-Col-Md-12 Ist-Col-Lg-8 </div>
        <div class="ist-col-sm-24 ist-col-md-12 ist-col-lg-8 ist-border-primary ist-card ist-flex-center"> Ist-Col-Sm-24 Ist-Col-Md-12 Ist-Col-Lg-8 </div>
        <div class="ist-col-sm-24 ist-col-md-12 ist-col-lg-8 ist-border-primary ist-card ist-flex-center"> Ist-Col-Sm-24 Ist-Col-Md-12 Ist-Col-Lg-8 </div>
        <div class="ist-col-sm-24 ist-col-md-12 ist-col-lg-6 ist-border-primary ist-card ist-flex-center"> Ist-Col-Sm-24 Ist-Col-Md-12 Ist-Col-Lg-6 </div>
        <div class="ist-col-sm-24 ist-col-md-12 ist-col-lg-6 ist-border-primary ist-card ist-flex-center"> Ist-Col-Sm-24 Ist-Col-Md-12 Ist-Col-Lg-6 </div>
        <div class="ist-col-sm-24 ist-col-md-12 ist-col-lg-6 ist-border-primary ist-card ist-flex-center"> Ist-Col-Sm-24 Ist-Col-Md-12 Ist-Col-Lg-6 </div>
        <div class="ist-col-sm-24 ist-col-md-12 ist-col-lg-6 ist-border-primary ist-card ist-flex-center"> Ist-Col-Sm-24 Ist-Col-Md-12 Ist-Col-Lg-6 </div>
      </div>
    </IstDashboardLayout>
  </div>
</template>

<script>
import IstDashboardLayout from "istanvue-dashboard-layout";

export default {
  name: "App",
  components: {
    IstDashboardLayout,
  },
  data() {
    return {
      profileImage: require('./assets/logo.png'),
      logo: require('./assets/example-logo.png'),
      sideBarItems: [
        { to: "/", label: "Home Page", icon: "home" },
        { to: "/contact", label: "Contact", icon: "phone" },
        { to: "/about", label: "About", icon: "user" },
      ],
      profileDropdownItems: [
        { to: "/", label: "My Profile", icon: "user" },
        { to: "/contact", label: "Contact", icon: "phone" },
        { to: "/about", label: "About", icon: "user" },
      ],
      activeUser: {
        name: "Istan",
        lastname: "Vue",
      },
    };
  },
  computed: {
    profileFullName() {
      return `${this.activeUser.name} ${this.activeUser.lastname}`;
    },
    copyright() {
      return `© ${new Date().getFullYear()} IstanVue.com`;
    },
  },
};
</script>

<style>
.ist-card {
  height: 150px;
  border-radius: 13px;
  margin: 10px 0;
}
</style>

Props

| Props Name | Description | Type | Required | Default | Description | | --- | --- | --- | --- | --- | --- | | logo | URL to set for the src attribute | String | false | "” | image/* | | logo-alt | Value to set for the logo alt attribute | String | false | Brand Logo | | | side-bar-items | Value to set for the navbar items | Array | false | () ⇒ [] | | | profile-dropdown-items | Value to set for the dropdown items | Array | false | () ⇒ [] | It can be empty array. If it’s it, chevron icon doesnt show | | router-type | Value to set for the href links | String | false | a | router-link, nuxt-link | | logout-text | Value to set to the text in button | String | false | Çıkış Yap | | | title | Value to set to the title value | String | false | "” | It can be active router name | | profile-image | value set to profile avatar image | String | false | "” | | | profile-full-name | Value to set to active user full name for dropdown menu | String | true | “” | It can be active user fullname If profile-dropdown-items has data Chevron down button will show | | hide-logout-button | hidden sidebar logout button when value is true | Boolean | false | false | | | copyright | Value set to copyright in footer | String | false | © ${new Date().getFullYear()} Gürhan Arslan | |

SideBarItems

default: () ⇒ []

You have to use like in below

Icon Package: Font Awesome

🚨 You can use all solid icons from font awesome

sideBarItems: [
	{ to: “/”, label: “Home Page”, icon 'home'},
	{ to: “/contact”, label: “Contact”, icon: 'phone'},
	{ to: “/about”, label: “About”, icon: 'coffee'},
]

ProfileDropdownItems

default: () ⇒ []

You have to use like in below

Icon Package: Font Awesome

🚨 You can use all solid icons from font awesome

profileDropdownItems: [
	{ to: “/”, label: “Home Page”, icon 'home'},
	{ to: “/contact”, label: “Contact”, icon: 'phone'},
	{ to: “/about”, label: “About”, icon: 'coffee'},
]

Events

| Event Name | Description | | --- | --- | | click:logout | Native click event object | | pageWidth | Listen page width and return it |

Slots

| Slot Name | Description | | --- | --- | | default | value set to main content page | | footer | value set to right of footer |

default

<ist-dashboard-layout>
// do something here...
// ex <router-view/>
</ist-dashboard-layout>

v-slot:footer

<template v-slot:footer> 
// do something here...
</template>