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-react
| - public
| - img
- favicon.ico
- index.html
| - src
| - assets
| - css
| - fonts
| - images
| - js
| - scss
| - components
| - vito
| - config
| - vito
| - layouts
| - AuthLayouts
| - AuthLayouts1
- BlankLayout
- Layout1
| - helper
| - router
| - store
| - views
- App.js
- index.js
- serviceWorker.js
- .editorconfig
- .eslintignore.js
- .gitignore
- babel.config.js
- .env
- package.json
- README.md
- webpack.config.js
Here is the general structure of the vito custom components:
<!-- Vito components -->
| - components
| - vito
| - breadcrumbs
- BreadCrumbStyle1
| - calendar
- BreadCrumbStyle1
- BreadCrumbStyle1
| - cards
| - DetailCard
| - TimelineCard
| - UserDetailsCard
| - chartStyle
| - apexChart
| - apexLiveChart
| - MapAmChart
| - footer
| - FooterStyle1
| - lottie
| - Lottie
| - menus
| - ListStyle1
| - navbars
| - NavBarStyle1
| - rightsidebar
| - RightSideBarStyle1
| - sidebar
| - SideBarStyle1
| - slider
| - Slick
| - tab
| - tab-nav
| - tab-nav-item
| - tab-content
| - tab-content-item
| - timeline
| - TimeLine
| - loader
| - Loader
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.
| - vito-vue
| - layouts
| - Layout1
<NavBarStyle1
title={"Dashboard"}
homeUrl={"/"}
logo={ require('../../assets/images/logo.gif') }
breadCrumb={items}
>
For Setup Firebase Goto following file and update keys
src/constant/firebase.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 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
| - AuthLayouts
| - AuthLayouts1
- BlankLayout
- Layout1
Router url configure
<Switch>
<Route path="/auth/sign-in1" component={SignIn1} />
<Route path="/auth/sign-up1" component={SignUp1} />
<Route path="/auth/recover-password" component={ResetPassword} />
</Switch>
Here is the sidebar object example just you can copy and past and rename then title and icon.
[
{
"title": "Dashboard",
"is_heading": true,
"is_active": false,
"class_name": "",
"is_icon_class": true,
"icon": ""
},
]
Sidebar based on json and check the file in spacific path ./src/fackData/json/SideBar.json and import or add your array to sidebar key.
// Import JSON Data...
import sideBarItems from '../../fakeData/json/sideBar';
<SideBarStyle1
items={sideBarItems}
logo={ require('../../assets/images/logo.png') }
homeUrl={"/"}
/>
We have build different types of custom card components. And these are the some prop and slots
import React from 'react';
const Index = (props) => {
return(
<>
<div className="iq-card ">
<div className="iq-card-body">
<div className="row">
<div className="col-lg-12 mb-2 d-flex justify-content-between">
<div className={"icon iq-icon-box rounded-circle rounded-circle "+props.iconClass}>
<i className={props.icon}></i>
</div>
</div>
<div className="col-lg-12 mt-3">
<h6 className="card-title text-uppercase text-secondary mb-0">{props.text}</h6>
<span className="h2 text-dark mb-0 counter">{props.counter}</span>
</div>
</div>
{props.updown ? (<p className="mb-0 text-muted mt-3">{props.updown}</p>) : ''}
</div>
</div>
</>
)
};
export default Index;
We have build timeline components. And these are the some prop
import React from "react";
const Index = props => {
const { timeData, color } = props;
return (
<>
<div className={"timeline-dots " + (color !== undefined ? ("border-" + color) : "")} />
<h6 className={"float-left mb-1"}>{ timeData.title }</h6>
<small className={"float-right mt-1"}>{ timeData.date }</small>
<div className={"d-inline-block w-100"}>
<p>{ timeData.description }</p>
{ props.children }
</div>
</>
)
};
export default Index;
We have build lottie components. And these are the some prop
import React from 'react';
import Lottie from 'react-lottie';
class Index extends React.Component{
constructor(props) {
super(props);
this.state = {isStopped: false, isPaused: false};
}
render() {
const defaultOptions = {
loop: this.props.loop ? this.props.loop : true,
autoplay: this.props.autoplay ? this.props.autoplay : true,
animationData: this.props.data,
rendererSettings: {
preserveAspectRatio: 'xMidYMid slice'
}
};
return (
<div className={this.props.className}>
<Lottie options={defaultOptions}
isStopped={this.state.isStopped}
isPaused={this.state.isPaused}/>
</div>
);
}
}
export default Index;
Bootstrap has wonderfull documentation on the following components::
Vue Bootstrap for extra component https://reactstrap.github.io/components
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.