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:
React
| - public
| - img
- favicon.ico
- index.html
| - src
| - assets
| - css
| - fonts
| - images
| - scss
| - components
| - partials
| - footerstyle
| - headerstyle
| - sidebarstyle
| - layouts
| - backend
| - layout1.js
| - router
| - extra-pages-route.js
| - layout1-route.js
| - layouts-route.js
| - store
| - views
- App.js
- App.test.js
- index.js
- reportWebVitals.js
- setupTests.js
- env.development.local
- env.production.local
- .gitignore
- .htaccess
- package-lock.json
- package.json
- README.md
Set favicon for replace favicon.ico and restart server
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
Use the header style which is in components -> streamit -> Partials -> Header. Replace "logo.png" with your own logo image URL.
<Link to="/" className="header-logo">
<img src={logo} className="img-fluid rounded-normal" alt="logo" />
</Link>
In react version change with scss file.
@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")
$font-family-title: 'Heebo', sans-serif;
$font-family-base: 'Poppins', sans-serif
Here is the layout configure
const Layout1 = () => {
return(
<>
<div className="wrapper">
<SidebarStyle />
<HeaderStyle1 />
<div className="content-page" id="content-page">
<Layout1Route />
</div>
</div>
<FooterStyle />
</>
)
}
Here is the sidebar and header
Sidebar
<Accordion as="ul" id="iq-sidebar-toggle" className="iq-menu" onSelect={(e) => setActiveMenu(e)}>
<li className={`${location.pathname === '/' ? 'active' : ''} `}>
<Link to="/" className="text-primary">
<i className="ri-arrow-right-line"></i>
<span>Visit site</span>
</Link>
</li>
<li className={`${location.pathname === '/' ? 'active' : ''} `}>
<Link to="/" className="iq-waves-effect">
<i className="las la-home iq-arrow-left"></i>
<span>Dashboard</span>
</Link>
</li>
<li className={`${location.pathname === '/rating' ? 'active' : ''} `}>
<Link to="/rating" className="iq-waves-effect">
<i className="las la-star-half-alt"></i>
<span>Rating </span>
</Link>
</li>
</Accordion>
Header
<Nav as="ul" className="ml-auto navbar-list iq-header">
<Dropdown as="li" className="nav-item nav-icon search-content iq-search">
<Dropdown.Toggle as={CustomToggle} href="#" variant="search-toggle iq-waves-effect text-gray rounded">
<i className="ri-search-line"></i>
</Dropdown.Toggle>
<Dropdown.Menu>
<Form action="#" className="search-box p-0">
<input type="text" className="text search-input" placeholder="Type here to search..."/>
<Link className="search-link" to="#"><i className="ri-search-line"></i></Link>
</Form>
</Dropdown.Menu>
</Dropdown>
</Nav>
We have build different types of custom card components. And these are the some prop and slots
const Card = (props) => <div className={`card ${props.className ? props.className : ''}`}> {props.children} </div>
Card.Header = (props) => <div className={`card-header d-flex justify-content-between ${props.className ? props.className : ''}`}> {props.children} </div>
Card.Body = (props) => <div className={`card-body ${props.className ? props.className :''}`}> {props.children} </div>
Card.Footer = (props) => <div className="card-footer"> {props.children} </div>
Card.Header.Title = (props) => <div className={`header-title ${props.className ? props.className : ''}`}> {props.children} </div>
Card.Header.Action = (props) => <div className={`header-action ${props.className ? props.className : ''}`}> {props.children} </div>
Prop is set the attriblute for the component.
Name | Detail |
---|---|
Classname | Class added in card header, card body, card footer, card header title, card header action div |
const CustomToggle = React.forwardRef(({ children,variant, onClick }, ref) => (
<Link
to="/"
ref={ref}
onClick={(e) => {
e.preventDefault();
onClick(e);
}}
className={variant}
>
{children}
</Link>
));
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 |
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]<p>
</section>
</p>
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.
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.
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.
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>
You can use these .mm-over-black-30, .mm-over-white-20, .mm-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="mm-over-black-80">
[YOUR CONTENT]
</div>
Structure: .mm-over-{color}-{opacity}. For Example, .mm-over-black-80
Bootstrap has wonderfull documentation on the following components::
Supports all major Browsers like Google Chrome, Mozilla Firefox, Safari, Opera, Internet Explorer 9 and above.
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.