Steps to be followed for getting started with the template:
There are followings basics packages you should install before going further.
Here is the steps of production:
Here is the general structure of the template:
vito-angular
| - e2e
| - src
- protractor.conf.js
- tsconfig.json
| - node_modules
| - src
| - app
| - components
| - fake-api
| - layouts
| - models
| - services
| - store
| - views
| - app-routing.module.ts
| - app.component.html
| - app.component.ts
| - app.module.ts
| - assets
| - environments
| - angular.json
| - components
|-vito
| - breadcrumbs
| - card-with-image
| - cards
| - charts
| - full-calendar
| - loaders
| - menus
| - nav-bars
| - scroll-top
| - side-bars
| - tabs
| - fack-api
| - json
| - Email.json
| - SideBar.json
| - Users.json
| - layouts
| - auth-layout
| - blank-layout
| - layout1
| - models
| - menu-item.ts
| - ticket-seat.ts
| - user.ts
| - services
| - api.service.ts
| - store
| - actions
| - reducers
| - selectes
| - states
| - views
| - application
| - auth-pages
| - calendar
| - charts
| - core
| - dashboards
| - forms
| - icons
| - maps
| - pages
| - table
| - assets
| - css
| - fonts
| - images
| - js
| - environments
| - environment.prod.ts
| - environment.ts
- favicon.ico
- index.html
- .editorconfig
- .gitignore
- angular.json
- package-lock.json
- package.json
- README.md
Here is the general structure of the vito custom components:
<!-- Vito components -->
| - components
| - vito
| - breadcrumbs
- breadcrumb1
| - card-with-image
| - cards
| - iq-card
| - charts
| - apex-chart
| - high-chart
| - full-calendar
| - loaders
| - loader1
| - menus
| - list-style1
| - nav-bars
| - nav-bar1
| - scroll-top
| - side-bars
| - side-bar1
| - tabs
| - tab-content
| - tab-nav
Set favicon for replace favicon.ico and restart server
Use the header style which is in components -> vito -> Partials -> Header. Replace "logo.png" with your own logo image URL.
<SideBarStyle1 :items="sidebar" :logo="logo"></SideBarStyle1>
<NavBarStyle1 title="Dashboard" :homeURL="{ name: 'dashboard1.home' }" :logo="logo"></NavBarStyle1>
<script>
import SideBarItems from '../FackApi/json/SideBar'
import logoImg from '../assets/images/logo.png'
data () {
return {
sidebar: SideBarItems,
userProfile: profile,
logo: logo
}
}
</script>
For Setup Firebase Goto following file and update keys
src/config/constant.js
firebaseConfig: {
apiKey: YOUR_API_KEY,
authDomain: YOUR_AUTH_DOMAIN,
databaseURL: YOUR_DATABASE_URL,
projectId: YOUR_PROJECT_ID,
storageBucket: YOUR_STORAGE_BUCKET,
messagingSenderId: YOUR_MESSAGING_SENDER_ID,
appId: YOUR_APP_ID
},
For Setup Autho Goto following file and update keys
src/config/constant.js
auth0Config: {
domain: YOUR_DOMAIN,
clientID: YOUR_CLIENT_ID,
// make sure this line is contains the port: 4200
redirectUri: 'http://localhost:4200/callback',
// we will use the api/v2/ to access the user information as payload
audience: 'https://dev-6u-3fb22.auth0.com/api/v2/',
responseType: 'token id_token',
scope: 'openid profile'
}
For Setup Autho Goto following file and update keys and or use .env variable
src/config/algolia.js
export const APP_ID = YOUR_APPLICATION_ID
export const APP_KEY = YOUR_APP_KEY
Here is the layout and routing configure
| - layouts
| - auth-layout
| - blank-layout
| - layout1
| - layout2
| - app-routing.module.ts<
Router url configure
// Set Layout in this route
const routes: Routes = [
{ path: '', loadChildren: './layouts/layout1/layout1.module#Layout1Module' },
{ path: 'page', loadChildren: './layouts/blank-layout/blank-layout.module#BlankLayoutModule' },
{ path: 'auth', loadChildren: './layouts/auth-layout/auth-layout.module#AuthLayoutModule' },
{ path: '**', component: ErrorPageComponent }
];
Here is the sidebar object example just you can copy and past and rename then title and icon.
[
{
"title": "Dashboard",
"is_heading": false,
"is_active": true,
"link": "",
"class_name": "",
"is_icon_class": true,
"icon": "ri-home-4-line",
"children": [
{
"title": "Dashboard1",
"is_active": false,
"link": {
"name": "dashboard1.home"
},
"class_name": "",
"is_icon_class": false,
"icon": ""
}
]
}
]
Sidebar based on json and check the file in spacific path ./src/FackApi/json/SideBar.json and import or add your array to sidebar key.
<SideBarStyle1 :items="sidebar" :logo="logo" />
<NavBarStyle1 title="Dashboard" :homeURL="{ name: 'dashboard1.home' }" :logo="logo">
<template v-slot:right>
add your items
</template>
</NavBarStyle1>
<FooterStyle1>
<template v-slot:left>
<li class="list-inline-item"><a href="#">Privacy Policy</a></li>
<li class="list-inline-item"><a href="#">Terms of Use</a></li>
</template>
<template v-slot:right>
Copyright 2020 <a href="#">Vito</a> All Rights Reserved.
</template>
</FooterStyle1>
import SideBarItems from '../FackApi/json/SideBar'
data () {
return {
sidebar: SideBarItems
}
}
We have build different types of custom card components. And these are the some prop and slots
<iq-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>
</iq-card>
Input is set the attribute for the component.
Name | Detail |
---|---|
cardClass | For extra class to add in card |
cardHeaderClass | Class added in card header |
cardBodyClass | Class added in card body |
cardFooterClass | Class added in card footer |
Template is set of the content between opening and closing tag.
Name | Detail |
---|---|
[card-header] | For card top left icon or title |
[card-top] | For placing the image or content at top side of card body |
[card-footer] | For card footer to add with padding |
[card-bottom] | For card without padding added content at bottom |
Template is set of the content between opening and closing tag.
<div id="chart"></div>
Slot is set of the content between opening and closing tag.
<app-apex-chart ids="chart_ID" [options]="optionName"></app-apex-chart>
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 |
<app-high-chart ids="chart_ID" [options]="optionName"></app-high-chart>
Input 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 |
We have build custom tab components. And these are the some prop and slots
<tabset type="pills">
<tab heading="Home" id="tab14">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.</tab>
<tab heading="Profile" id="tab15">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.</tab>
<tab heading="Contact" id="tab16">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.</tab>
</tabset>
Input 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 | - |
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 |
Input is set the attriblute for the component.
Name | Type | Detail |
---|---|---|
id | String | id for identify the tab content to nav tab |
Input 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. |
We have build timeline components. And these are the some prop and slots
<Slick>
<div>
<a href="javascript:void(0)" class="iq-booking-date">
<div class="iq-booking-dot"></div>
<h3>Slider Item</h3>
</a>
</div>
</Slick>
Input is set the attriblute for the component.
Name | Type | Detail |
---|---|---|
sliderOption | Object | this Input has pass the slider setting object |
Slot is set of the content between opening and closing tag.
Name | Detail |
---|---|
default | Pass slider item in default slot |
We have build lottie components. And these are the some prop
<lottie :option="require('../../assets/images/small/data')"></lottie>
Prop is set the attriblute for the component.
Name | Type | Detail |
---|---|---|
option | Object | Option pass the lottie animation json file to execute the svg image. |
We have build fullcalender components. And these are the some Inputs
<full-calendar [plugins]="calendarPlugins" [events]="calendarEvents" [weekends]="calendarWeekends">
Input is set the attriblute for the component.
Name | Type | Detail |
---|---|---|
header | Object | header Input has pass the left top center action button |
events | Array | Events Input has just pass the array of events toh show the list of events and also set the color & dateTime/td> |
Supports all major Browsers like Google Chrome, Mozilla Firefox, Safari, Opera, Internet Explorer 9 and above.
- Initial Release
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.