Istanvue-dashboard-layout NPM

Layout Screenshots

Web Design

web design istanvue-dashboard-layout

Tablet Design

tablet design istanvue-dashboard-layout

Mobile Design

mobile design istanvue-dashboard-layout

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>

vue.js,vue,nuxt,istanvue,ui,framework

@fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/vue-fontawesome @vue/cli-service-global sass sass-loader

@infinitebrahmanuniverse/nolb-ist @everything-registry/sub-chunk-1938

2 years ago

2 years ago

2 years ago

2 years ago