Instadash

Template documentation version 2.0

Introduction

First of all, Thank you so much for purchasing this template and for being my loyal customer.

This documentation is to help you regarding each step of customization. Please go through the documentation carefully to understand how this template is made and how to edit this properly. Basic HTML and CSS knowledge is required to customize this template. You may learn basics here, here and here.

Quick Start

Get details about Requirements, Basic Installation, Structure, Color mode, Logo, favicon and loader setup your project with easy steps.

Requirement

This template have required 1 depandency

  1. NodeJS

File Structure

Here is the general File structure of the template:

  • Code-vue
    • public
      • img
      • favicon.ico
      • index.html
    • src
      • assets
        • css
        • fonts
        • images
        • js
        • scss
      • components
        • instadash
      • config
        • instadash
      • FackApi
        • instadash
      • layouts
        • backend
          • Layout-1.vue
          • Layout-2.vue
          • Layout-3.vue
        • BlankLayout.vue
      • plugins
        • index.js
        • global.js
        • bootstrap-vue.js
        • datatables.js
        • flatpickr.js
        • jvector.js
        • masonry.js
        • select2.js
      • router
      • store
      • Views
      • App.vue
      • main.js
    • .browserslistrc
    • .env
    • .env.example
    • .eslintignore
    • .eslintrc.js
    • .gitignore
    • babel.config.js
    • package-lock.json
    • package.json
    • README.md
    • Vue.config.js

Installation

Steps to be follow for getting started with the template:

Basic

  1. Start 
    cd CODE-VUE
  2. Install via the npm 
    npm install
  3. For development 
    npm run serve
  4. For build 
    npm run build

VUE

  1. Open CODE-VUE Folder to find all the Templates Files
  2. You'll have to upload these file using a FTP on your server
  3. Make sure you maintain the structure while uploading the required files/folders:
    • /assets/css - Stylesheets Folder
    • /assets/images - Images Folder
    • /assets/js - Javacripts Folder
    • /assets/vendor - Vendor Folder
    • /views/backend/Dashboards - Index File/Homepage
    Other files can be used according to your convenience.
  4. Now that you have followed these steps your basic installation is complete and ready to flaunt your site to the world.

Customization

There are some customization like change color, logo, loader, favicon, default mode (dark or light) etc...

Color

Here is the Change color mode Dark/Light in Vue

Goto src/store/index.js and dark mode change the dark variable

For Dark mode 
                                                    "dark": true
For Light mode 
                                                    "dark": false

Favicon icon

Favicon is an icon associated with the URL that is displayed at various places, such as in a browser’s address bar or next to the site name in a bookmark list.

You can add a Favicon to your Website using the following code:

In Vue version favicon change with this way

  1. Replace favicon image or rename favicon icon name. or go to public/img/icon file and change.

Loading Transitions

Page Loading Transitions are enabled by default. If you wish to disable the page loading transition you can simply remove loader from respective layout in layouts folder

or

simply remove loader component folder inside components

In Vue loader change with 2 diffrant way

  • Replace loader image.
  • Go to assets/scss/backend/layouts/_dark.scss and add or change path set with images.

For Changing Fonts

In Vue version change with scss file.

  1. Go to src/assets/scss/helper/_fonts.scss and change google fonts 
                                                            
                                                        
                                                        @import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;1,100;1,300;1,400;1,500&display=swap")
                                                        
                                                        
                                                        @import ("https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;1,200;1,300;1,400;1,600&display=swap")
  2. Go to src/assets/scss/_variable.scss and change font family variable 
                                                            $font-family-title: 'Roboto', sans-serif;
                                                        $font-family-base: 'Nunito', sans-serif;

Layout Configure

Here is the layout and routing configure

                                                    {
                                                        path: '/',
                                                        name: '',
                                                        component: Layout1,
                                                        children: childRoute()
                                                    },

Router url configure

simply replace layout of component: Layout1 with Layout2 or different layout to change layout in index.js 

{
    path: '',
    name: 'layout-2',
    component: Layout2,
    children: [
        {
        path: '/dashboard-2',
        name: 'layout.dashboard2',
        meta: {  name: 'Dashbord2' },
        component: Dashbord2
        },
    ]
    },

{
    path: '',
    name: 'layout-3',
    component: Layout3,
    children: [
        {
        path: '/dashboard-3',
        name: 'layout.dashboard3',
        meta: {  name: 'Dashbord3' },
        component: Dashbord3
        },
    ]
    },

Sidebar & Header

Here is the sidebar object example just you can copy and past and rename then title and icon.

{
    "name": "home",
    "title": "Dashboards",
    "short_title": "Home",
    "href": "backend/index",
    "link": {
        "name": ""
    },
    "class_name": "",
    "icon_class": "las la-home iq-arrow-left",
    "expanded_icon_class": "las la-angle-down iq-arrow-right arrow-hover",
    "collapse_icon_class": "las la-angle-right iq-arrow-right arrow-active",
    "children": [
        {
            "name": "dashboard-1",
            "title": "Dashboard 1",
            "icon_class": "lab la-blogger-b",
            "href": "backend/dashboard-1",
            "link": {
                "name": "layout.dashboard1"
            }
        }
}

Sidebar based on json and check the file in spacific path ./src/jsonData/Sidebar.json and import or add your array to sidebar key.

<template>
<div>
    <Loader/>
    <div class="wrapper">

    <SidebarStyle :items="sidebarItems" />
    <HeaderStyle1/>
    <div class="content-page">
        <transition name="router-anim">
        <router-view/>
        </transition>
    </div>
    </div>
    <FooterStyle />
</div>
</template>
                                            
import sideBarItem from "@/JsonData/sidebar.json"
        
data () {
    return {
        sidebarItems:sideBarItem
    }
}

Custom Components

Custom Card

We have build different types of custom card components. And these are the some prop and slots

<card body-class="border text-center" class="bg-primary text-white">
<template v-slot:headerTitle>
<h4>Card Title</h4>
</template>
<template v-slot:body>
<p >lorium ipsum</b-button>
</template>
<template v-slot:footer>
<b-button variant="danger">Button</b-button>
</template>
</card>

Prop

Prop is set the attriblute for the component.

Name Detail
headerClass Class added in card header div
bodyClass Class added in card body div
footerClass Class added in card footer div

Slots

Slot is set of the content between opening and closing tag.

Name Detail
headerTitle For card top left icon or title
headerAction For card top right icon or title
body For card body to add with padding
default For without padding added content

Am Chart

<AmChart :element="item.type" :type="item.type" :option="item.bodyData"/>
Prop

Prop is set the attriblute for the component.

Name Type Detail
element String element is identify the unique div element like id
type String Difftrent type of chart set by type
option Object Chart data and setting by option object
Types

Types of Am Chart

  1. line
  2. column
  3. mixes-column
  4. stacked
  5. bar-line
  6. data-based
  7. line-zoom-h
  8. line-zoom-v
  9. radar
  10. polar-scatter
  11. polar
  12. pie

Apex Chart

Slot is set of the content between opening and closing tag.

 
<ApexChart element="chart" :chartOption="option"/>
Prop

Prop is set the attriblute for the component.

Name Type Detail
element String element is identify the unique div element like id
chartOption Object Set Chart option

High chart

Slot is set of the content between opening and closing tag.

<HighChart :ref="item.type" :option="item.bodyData"/>
Prop

Prop is set the attriblute for the component.

Name Type Detail
ref String element is identify the unique div element like id
option Object Set Chart option

Tab

We have build custom tab components. And these are the some prop and slots

 
<tab-nav :tabs="true" id="myTab-1">
<tab-nav-items :active="true" id="home-tab" ariaControls="home" role="tab" :ariaSelected="true" title="Home" />
<tab-nav-items :active="false" id="profile-tab" ariaControls="profile" role="tab" :ariaSelected="false" title="Profile" />
<tab-nav-items :active="false" id="contact-tab" ariaControls="contact" role="tab" :ariaSelected="false" title="Contact" />
</tab-nav>
<tab-content id="myTabContent">
<tab-content-item :active="true" id="home" aria-labelled-by="home-tab">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</tab-content-item>
<tab-content-item :active="false" id="profile" aria-labelled-by="profile-tab">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</tab-content-item>
<tab-content-item :active="false" id="contact" aria-labelled-by="contact-tab">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</tab-content-item>
</tab-content>

Tab Nav

Prop

Prop is set the attriblute for the component.

Name Type Detail
id String -
pills Boolean pills is style of nav tab and pass the boolean value
tabs Boolean tabs is style of nav tab and pass the boolean value
vertical Boolean vertical is list style of nav tab and pass the boolean value
align String align nav tabs right, left and center
Events

Events is any functionality want any change of tab

Name Detail
change on tab change call this event

Tab Item

Prop

Prop is set the attriblute for the component.

Name Type Detail
id String identify the tab content for navigate
active Boolean CSS class (or classes) to apply to the currently active tab
ariaControls String The aria-controls attribute creates a cause and effect relationship
ariaSelected Boolean This attribute is used with single-selection and multiple-selection widgets
dataToggle String The toggle tells Bootstrap what to do and the target tells
href String Set navigation link
title String Pass Title as a string or set html content via slot
liClass String -
Slots

Slot is set of the content between opening and closing tag.

Name Detail
title For tab nav item content any html content or image by using slot

Tab Content

Prop

Prop is set the attriblute for the component.

Name Type Detail
id String id for identify the tab content to nav tab

Tab Content Item

Prop

Prop is set the attriblute for the component.

Name Type Detail
id String identify the tab content for navigate
active Boolean CSS class (or classes) to apply to the currently active tab
ariaLabelledBy String Identifies the element (or elements) that labels the current element.

Progressbar

We have build progressbar components. And these are the some prop

<div :class="`iq-progress-bar bg-${colorName}-light ${verticle ? 'progress-bar-vertical bg-'+colorName : '-light'}`">
<span :class="`bg-${color}`+' '+midclass" ref="progress" style="transition: 'width 2s ease 0s " :data-value="value">
    <slot name="text"/>
</span>
</div>

Prop

Prop is set the attriblute for the component.

Name Type Detail
colorName String Pass Background color of Progressbar components
color String Pass color of Progressbar components
verticle Boolean Pass alignment of Progressbar components

Helper classes

For section padding

You can add this helper class to set section padding top 100px and padding bottom 100px.
Add overview-block-ptb class in section tag. See example below: 

                                        <section class="... overview-block-ptb">
                                        [YOUR CONTENT]

                                        </section>

Note Use this helper class to maintain all page section spacing. You can also use overview-block-pt for only padding top and overview-block-pb for only padding bottom.

For Text color

You can use color in the Text. simply add .main-color ( or any color you want) class where you want to use. See example below: 

                                        <div class="text-primary">
                                        [YOUR TEXT CONTENT]
                                        </div>

Note We include 4 color helper class in our template text-gray, text-black, main-color and text-white. you can add unlimited color class according to your needs.

For Background color

You can use color in the background. simply add .white-bg (or any color you want) class where you want to use. See example below: 

                                        <div class="bg-primary">
                                        [YOUR CONTENT]
                                        </div>

Note We include 4 color helper class in our template text-gray, text-black, main-color and text-white. you can add unlimited color class according to your needs.

For Background Images and pattern

You can use an image in the background with parallax effect by simply adding InlineStyle in div tag and by use of this you can create your own background. See example below: 

                                        <div style="background:url(${require(path)}); ">
                                        [YOUR CONTENT]
                                        </div>

If your background is small and you want to use repeated background then use styling property background-repeat and set the value repeat or no-repeat. See the example below:

                                        <div style="background:url(${require(path)}); background-repeat:no-repeat;">
                                        [YOUR CONTENT]
                                        </div>

If you want to use your background like cover or cointainer. You just need to add styling property background-size and set the value cover or cointainer. see the example below:

                                        <div style="background:url(${require(path)}); background-size:cover;">
                                        [YOUR CONTENT]
                                        </div>

For Background overlay

You can use these .iq-over-black-30, .iq-over-white-20, .iq-over-green-90 classes to any element in your HTML code to apply overlay color on any image or section. See example below:

                                        <div class="iq-over-black-80">
                                        [YOUR CONTENT]
                                        </div>

Structure: .iq-over-{color}-{opacity}. For Example, .iq-over-black-80

Bootstrap Components

Source & Credits

All images and videos are for preview purposes only and are not included in the download files. Images are of copyrights under Creative Commons CC0.

Tool

Images



Plugins



CSS & Fonts