1281 lines
90 KiB
HTML
1281 lines
90 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<title>Dasho - Bootstrap 5 Admin Template</title>
|
|
<!--[if lt IE 10]>
|
|
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
|
|
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
|
|
<![endif]-->
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
<!-- meta -->
|
|
<meta name="description" content="Dasho Bootstrap Admin Template Documentation helper file." />
|
|
<meta name="author" content="Phoenixcoded" />
|
|
<!-- favicon -->
|
|
<link rel="icon" href="../assets//images/favicon.svg" type="image/x-icon">
|
|
<!-- required CSS -->
|
|
<link rel="stylesheet" href="../assets//fonts/fontawesome/css/fontawesome-all.min.css">
|
|
<link rel="stylesheet" href="../assets//plugins/animation/css/animate.min.css">
|
|
<link rel="stylesheet" href="../assets//plugins/prism/css/prism.min.css">
|
|
<!-- custom CSS -->
|
|
<link rel="stylesheet" href="../assets//css/style.css">
|
|
<!-- Internal CSS -->
|
|
<style>
|
|
.pcoded-navbar .pcoded-inner-navbar>li.active>a,
|
|
.pcoded-navbar .pcoded-inner-navbar>li.pcoded-trigger>a {
|
|
background: transparent;
|
|
}
|
|
|
|
.pcoded-navbar.menu-light .pcoded-inner-navbar>li.active>a,
|
|
.pcoded-navbar.menu-light .pcoded-inner-navbar>li.pcoded-trigger>a,
|
|
.pcoded-navbar .pcoded-inner-navbar>li.active>a,
|
|
.pcoded-navbar .pcoded-inner-navbar>li>a.active {
|
|
background: #fff;
|
|
color: #19BCBF;
|
|
position: relative;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.pcoded-navbar .pcoded-inner-navbar>li.active>a,
|
|
.pcoded-navbar .pcoded-inner-navbar>li>a.active>.pcoded-micon {
|
|
color: #19BCBF;
|
|
}
|
|
|
|
.pcoded-navbar .pcoded-inner-navbar>li>a.active:after {
|
|
content: "";
|
|
background-color: #19BCBF;
|
|
z-index: 1027;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0px;
|
|
width: 3px;
|
|
height: 100%;
|
|
}
|
|
|
|
.nav-pills .nav-link.active,
|
|
.nav-pills .show>.nav-link {
|
|
background: linear-gradient(-45deg, #19BCBF, #149698);
|
|
box-shadow: none;
|
|
}
|
|
|
|
pre[class*=language-]>code {
|
|
border-left: 5px solid #2196f3;
|
|
}
|
|
|
|
.nav-pills {
|
|
padding: 15px 25px;
|
|
}
|
|
|
|
.nav-pills>li i {
|
|
display: inline-block;
|
|
font-size: 15px;
|
|
padding: 0px 0;
|
|
}
|
|
|
|
#gulp pre[class*=language-].line-numbers.line-numbers code {
|
|
padding-left: 1.5em;
|
|
}
|
|
|
|
.img-block img {
|
|
width: 120px;
|
|
margin-right: 8px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.pcoded-navbar .pcoded-inner-navbar>li>a.active:after {
|
|
background: linear-gradient(-45deg, #19BCBF, #149698);
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<nav id="navbar-example2" class="pcoded-navbar menupos-fixed menu-dark">
|
|
<div class="navbar-wrapper">
|
|
<div class="navbar-brand header-logo">
|
|
<a href="index.html">
|
|
<img class="img-fluid" src="../assets//images/logo.svg" alt="Dasho Logo" />
|
|
</a>
|
|
<a class="mobile-menu" id="mobile-collapse" href="#!"><span></span></a>
|
|
</div>
|
|
<div class="navbar-content scroll-div">
|
|
<ul class="nav pcoded-inner-navbar">
|
|
<li class="nav-item pcoded-menu-caption">
|
|
<label>Getting started</label>
|
|
</li>
|
|
<li class="nav-item"><a href="index.html" class="nav-link"><span class="pcoded-micon"><i
|
|
class="feather icon-home"></i></span><span class="pcoded-mtext">Dasho</span></a></li>
|
|
<li class="nav-item"><a href="index.html" class="nav-link"><span class="pcoded-micon"><i
|
|
class="feather icon-navigation"></i></span><span class="pcoded-mtext">Quick
|
|
Start</span></a></li>
|
|
<li class="nav-item"><a href="#gulp" class="nav-link active"><span class="pcoded-micon"><i
|
|
class="fab fa-gulp"></i></span><span class="pcoded-mtext">Gulp setup</span></a></li>
|
|
<li class="nav-item pcoded-menu-caption">
|
|
<label>Structure</label>
|
|
</li>
|
|
<li class="nav-item"><a href="index.html" class="nav-link"><span class="pcoded-micon"><i
|
|
class="far fa-folder-open"></i></span><span class="pcoded-mtext">Directory
|
|
Structure</span></a></li>
|
|
<li class="nav-item"><a href="index.html" class="nav-link"><span class="pcoded-micon"><i
|
|
class="feather icon-file-text"></i></span><span class="pcoded-mtext">Page
|
|
Structure</span></a></li>
|
|
<li class="nav-item pcoded-menu-caption">
|
|
<label>layouts</label>
|
|
</li>
|
|
<li class="nav-item"><a href="index.html" class="nav-link"><span class="pcoded-micon"><i
|
|
class="feather icon-layout"></i></span><span class="pcoded-mtext">Layout</span></a></li>
|
|
<li class="nav-item"><a href="index.html" class="nav-link"><span class="pcoded-micon"><i
|
|
class="feather icon-scissors"></i></span><span class="pcoded-mtext">Theme
|
|
Customizer</span></a></li>
|
|
<li class="nav-item"><a href="index.html" class="nav-link"><span class="pcoded-micon"><i
|
|
class="fab fa-sass"></i></span><span class="pcoded-mtext">Scss variables</span></a></li>
|
|
<li class="nav-item pcoded-menu-caption">
|
|
<label>Resources & References</label>
|
|
</li>
|
|
<li class="nav-item"><a href="index.html" class="nav-link"><span class="pcoded-micon"><i
|
|
class="fas fa-plug"></i></span><span class="pcoded-mtext">Plugins</span></a></li>
|
|
<li class="nav-item"><a href="index.html" class="nav-link"><span class="pcoded-micon"><i
|
|
class="fas fa-plug"></i></span><span class="pcoded-mtext">Extra References</span></a>
|
|
</li>
|
|
<li class="nav-item"><a href="index.html" class="nav-link"><span class="pcoded-micon"><i
|
|
class="feather icon-help-circle"></i></span><span class="pcoded-mtext">FAQ</span></a>
|
|
</li>
|
|
<li class="nav-item"><a href="index.html" class="nav-link"><span class="pcoded-micon"><i
|
|
class="feather icon-book"></i></span><span class="pcoded-mtext">Change Log</span></a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<header data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-root-margin="0px 0px 20%"
|
|
class="navbar pcoded-header navbar-expand-lg navbar-light headerpos-fixed">
|
|
<div class="m-header">
|
|
<a class="mobile-menu" id="mobile-collapse1" href="#!"><span></span></a>
|
|
<a href="index.html">
|
|
<img class="img-fluid" src="../assets//images/logo.svg" alt="Dasho Logo" />
|
|
</a>
|
|
</div>
|
|
<a class="mobile-menu" id="mobile-header" href="#!">
|
|
<i class="feather icon-more-horizontal"></i>
|
|
</a>
|
|
<div class="collapse navbar-collapse">
|
|
<ul class="navbar-nav me-auto">
|
|
<li><a href="#!" class="full-screen" onclick="javascript:toggleFullScreen()"><i
|
|
class="feather icon-maximize"></i></a></li>
|
|
</ul>
|
|
<ul class="navbar-nav ms-auto">
|
|
<li>
|
|
<form action="#" target="_blank">
|
|
<button type="submit" class="btn btn-secondary"><i class="far fa-life-ring"></i>Support</button>
|
|
</form>
|
|
</li>
|
|
<li>
|
|
<form action="https://www.youtube.com/channel/UCnSxTMmztmhuBtN0x2ln1jg" target="_blank">
|
|
<button type="submit" class="btn btn-danger"><i class="far fa-life-ring"></i>Video
|
|
Tutorials</button>
|
|
</form>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</header>
|
|
<div class="pcoded-main-container" id="home">
|
|
<div class="pcoded-wrapper">
|
|
<div class="pcoded-content">
|
|
<div class="pcoded-inner-content">
|
|
<div class="main-body">
|
|
<div class="page-wrapper">
|
|
<div class="row">
|
|
<div class="col-sm-12">
|
|
<div class="card" id="gulp">
|
|
<div class="card-header">
|
|
<h5>Gulp (i.e. Optional)</h5>
|
|
<div class="card-header-right">
|
|
<div class="btn-group card-option">
|
|
<button type="button" class="btn dropdown-toggle btn-icon"
|
|
data-bs-toggle="dropdown" aria-haspopup="true">
|
|
<i class="feather icon-more-horizontal"></i>
|
|
</button>
|
|
<ul class="list-unstyled card-option dropdown-menu dropdown-menu-right">
|
|
<li class="dropdown-item minimize-card"><a href="#!"><span><i
|
|
class="feather icon-minus"></i>Collapse</span><span
|
|
style="display:none"><i
|
|
class="feather icon-plus"></i>Expand</span></a></li>
|
|
<li class="dropdown-item close-card"><a href="#!"><i
|
|
class="feather icon-trash"></i>Remove</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="alert alert-warning mb-0" role="alert">
|
|
<h4 class="alert-heading"><i
|
|
class="feather icon-alert-triangle me-2"></i>Gulp is not mandatory
|
|
</h4>
|
|
<hr class="opacity-100">
|
|
<p class="mb-1">You may skip this section if you don't want Gulp in your
|
|
project. Please use <code>quickstart/</code> directory in your project.
|
|
</p>
|
|
</div>
|
|
<p class="mt-3">You can use <a href="https://gulpjs.com/"
|
|
target="_blank">Gulp</a> for Automate and enhance your project workflow.
|
|
</p>
|
|
<h6>Don't know about Gulp?</h6>
|
|
<hr class="my-2 opacity-25">
|
|
<p>Gulp is a toolkit for automating painful or time-consuming tasks in your
|
|
project development workflow, so you can stop messing around and build
|
|
something easier than ever.</p>
|
|
<ul>
|
|
<li>Auto Minify/Uglify CSS, HTML, JS codes</li>
|
|
<li>Auto Compile SaSS file</li>
|
|
<li>3000+ <a href="https://gulpjs.com/plugins/" target="_blank">Plugins </a>
|
|
</li>
|
|
<li>Check this <a href="https://www.youtube.com/watch?v=LYbt50dhTko"
|
|
target="_blank">video</a> for more about Gulp Task Automation for
|
|
Beginners.</li>
|
|
</ul>
|
|
<h6>Gulp for Dasho</h6>
|
|
<hr class="my-2 opacity-25">
|
|
<p class="mb-1">Use <a href="https://gulpjs.com/" target="_blank">Gulp</a> in
|
|
Dasho is for build different layouts and theme customization with lots of
|
|
useful tasks like Image Optimization, SaSS compile
|
|
etc...which really useful to build the production ready
|
|
<code>dist/</code>directory.
|
|
</p>
|
|
<ul>
|
|
<li>Check this <a href="https://www.youtube.com/watch?v=LYbt50dhTko"
|
|
target="_blank">video</a> tutorial for how to setup Gulp for Dasho?
|
|
</li>
|
|
</ul>
|
|
<h6 class="mt-3">How to setup Gulp for Dasho?</h6>
|
|
<hr class="my-2 opacity-25">
|
|
<ol class="">
|
|
<li>Make sure that you have already <b class="f-w-600">install <a
|
|
href="https://nodejs.org/en/" target="_blank">Nodejs</a> and <a
|
|
href="https://gulpjs.com/" target="_blank">Gulp</a></b> in your
|
|
server/computer</li>
|
|
<li>Open "Nodejs Command prompt" and redirect to your project root
|
|
directory.</li>
|
|
<li>Enter the command <code>npm install</code> in command prompt.</li>
|
|
<li>After that you need to run below <code>gulp</code> tasks to build
|
|
production ready <code>dist/</code> directory.</li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5>Gulp Commands(task)</h5>
|
|
<div class="card-header-right">
|
|
<div class="btn-group card-option">
|
|
<button type="button" class="btn dropdown-toggle btn-icon"
|
|
data-bs-toggle="dropdown" aria-haspopup="true">
|
|
<i class="feather icon-more-horizontal"></i>
|
|
</button>
|
|
<ul class="list-unstyled card-option dropdown-menu dropdown-menu-right">
|
|
<li class="dropdown-item minimize-card"><a href="#!"><span><i
|
|
class="feather icon-minus"></i>Collapse</span><span
|
|
style="display:none"><i
|
|
class="feather icon-plus"></i>Expand</span></a></li>
|
|
<li class="dropdown-item close-card"><a href="#!"><i
|
|
class="feather icon-trash"></i>Remove</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<h6>Default task</h6>
|
|
<div class="table-responsive">
|
|
<table class="table table-bordered table-hover">
|
|
<thead>
|
|
<tr>
|
|
<th>Gulp Command</th>
|
|
<th>Description</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><code>gulp</code></td>
|
|
<td class="text-wrap">which build template in <code>/dist</code>
|
|
directory</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<h6>Basic task</h6>
|
|
<div class="table-responsive">
|
|
<table class="table table-bordered table-hover">
|
|
<thead>
|
|
<tr>
|
|
<th>Gulp Command</th>
|
|
<th>Description</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><code>gulp sass</code></td>
|
|
<td class="text-wrap">which compile .SaaS files from
|
|
<code>/src/assets/scss</code> directory and place it into a
|
|
<code>/dist/assets/css</code> directory
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>gulp imgmin</code></td>
|
|
<td class="text-wrap">which use to optimize images from
|
|
<code>/src/assets/img</code> directory and place it into a
|
|
<code>/dist/assets/img</code> directory
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>gulp build</code></td>
|
|
<td class="text-wrap">which use to copy files from
|
|
<code>/src/assets</code> directory and place it into a
|
|
<code>/dist/assets</code> directory
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>gulp build-html</code></td>
|
|
<td class="text-wrap">which use minify your html file from
|
|
<code>/src/default</code> directory and place it into a
|
|
<code>/dist/default</code> directory
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>gulp build-js</code></td>
|
|
<td class="text-wrap">which use to uglify <code>.js</code> files
|
|
from <code>/src/assets/js</code> directory and place it into
|
|
a <code>/dist/assets/js</code> directory</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>gulp watch</code></td>
|
|
<td class="text-wrap">It will automatically start your build
|
|
process if you make any changes in html,scss,js file from
|
|
<code>/src</code> directory and put new changes to
|
|
<code>/dist</code>
|
|
directory
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>gulp watch-minify</code></td>
|
|
<td class="text-wrap">It will automatically start your build
|
|
process if you make any changes in html,scss,js file from
|
|
<code>/src</code> directory and put new changes to
|
|
<code>/dist</code>
|
|
directory with <b class="f-w-500">minify assets</b>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<h6>Minify task</h6>
|
|
<div class="table-responsive">
|
|
<table class="table table-bordered table-hover">
|
|
<thead>
|
|
<tr>
|
|
<th>Gulp Command</th>
|
|
<th>Description</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><code>mincss</code></td>
|
|
<td class="text-wrap">which minify all css in
|
|
<code>/dist/assets/css</code> directory
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>uglify</code></td>
|
|
<td class="text-wrap">which minify all javascript in
|
|
<code>/dist/assets/js</code> directory
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>htmlmin</code></td>
|
|
<td class="text-wrap">which minify all html in
|
|
<code>/dist/default</code> directory
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>imgmin</code></td>
|
|
<td class="text-wrap">which minify all image in
|
|
<code>/dist/assets/images</code> directory
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card" id="filestruct">
|
|
<div class="card-header">
|
|
<h5>Gulp structure</h5>
|
|
<div class="card-header-right">
|
|
<div class="btn-group card-option">
|
|
<button type="button" class="btn dropdown-toggle btn-icon"
|
|
data-bs-toggle="dropdown" aria-haspopup="true">
|
|
<i class="feather icon-more-horizontal"></i>
|
|
</button>
|
|
<ul class="list-unstyled card-option dropdown-menu dropdown-menu-right">
|
|
<li class="dropdown-item minimize-card"><a href="#!"><span><i
|
|
class="feather icon-minus"></i>Collapse</span><span
|
|
style="display:none"><i class="feather icon-plus"></i>
|
|
Expand</span></a></li>
|
|
<li class="dropdown-item close-card"><a href="#!"><i
|
|
class="feather icon-trash"></i>Remove</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<pre>
|
|
<code class="language-markup">
|
|
Elite-able/
|
|
├── src/
|
|
│ ├── assets/
|
|
│ ├── html/
|
|
│ ├── doc/
|
|
├── .babelrc
|
|
├── gulpfile.js
|
|
├── package.json
|
|
├── package-lock.json
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5>Tons of layout using gulp</h5>
|
|
<div class="card-header-right">
|
|
<div class="btn-group card-option">
|
|
<button type="button" class="btn dropdown-toggle btn-icon"
|
|
data-bs-toggle="dropdown" aria-haspopup="true">
|
|
<i class="feather icon-more-horizontal"></i>
|
|
</button>
|
|
<ul class="list-unstyled card-option dropdown-menu dropdown-menu-right">
|
|
<li class="dropdown-item minimize-card"><a href="#!"><span><i
|
|
class="feather icon-minus"></i>Collapse</span><span
|
|
style="display:none"><i
|
|
class="feather icon-plus"></i>Expand</span></a></li>
|
|
<li class="dropdown-item close-card"><a href="#!"><i
|
|
class="feather icon-trash"></i>Remove</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<h3 class="mt-2">Pre-build layout( build ) using gulp</h3>
|
|
<blockquote class="blockquote">
|
|
<h5> How to use prebuild layout in gulp? </h5>
|
|
<p class="mb-0">to use prebuild layout using gulp you need to replace the
|
|
given code in <code>/gulpfile.js</code> gulp file in <b
|
|
class="f-w-600">"htmlmin"</b> task</p>
|
|
</blockquote>
|
|
<div class="img-block">
|
|
<a data-bs-toggle="modal" data-target="#exampleModal"
|
|
data-whatever="layout-1">
|
|
<img src="../assets//images/layout/layout-1.jpg" alt=""
|
|
class="img-fluid img-fluid p-1 border">
|
|
</a>
|
|
<a data-bs-toggle="modal" data-target="#exampleModal"
|
|
data-whatever="layout-2">
|
|
<img src="../assets//images/layout/layout-2.jpg" alt=""
|
|
class="img-fluid img-fluid p-1 border">
|
|
</a>
|
|
<a data-bs-toggle="modal" data-target="#exampleModal"
|
|
data-whatever="layout-3">
|
|
<img src="../assets//images/layout/layout-3.jpg" alt=""
|
|
class="img-fluid img-fluid p-1 border">
|
|
</a>
|
|
<a data-bs-toggle="modal" data-target="#exampleModal"
|
|
data-whatever="layout-4">
|
|
<img src="../assets//images/layout/layout-4.jpg" alt=""
|
|
class="img-fluid img-fluid p-1 border">
|
|
</a>
|
|
<a data-bs-toggle="modal" data-target="#exampleModal"
|
|
data-whatever="layout-5">
|
|
<img src="../assets//images/layout/layout-5.jpg" alt=""
|
|
class="img-fluid img-fluid p-1 border">
|
|
</a>
|
|
<a data-bs-toggle="modal" data-target="#exampleModal"
|
|
data-whatever="layout-6">
|
|
<img src="../assets//images/layout/layout-6.jpg" alt=""
|
|
class="img-fluid img-fluid p-1 border">
|
|
</a>
|
|
<a data-bs-toggle="modal" data-target="#exampleModal"
|
|
data-whatever="layout-7">
|
|
<img src="../assets//images/layout/layout-7.jpg" alt=""
|
|
class="img-fluid img-fluid p-1 border">
|
|
</a>
|
|
<a data-bs-toggle="modal" data-target="#exampleModal"
|
|
data-whatever="layout-8">
|
|
<img src="../assets//images/layout/layout-8.jpg" alt=""
|
|
class="img-fluid img-fluid p-1 border">
|
|
</a>
|
|
<a data-bs-toggle="modal" data-target="#exampleModal"
|
|
data-whatever="layout-9">
|
|
<img src="../assets//images/layout/layout-9.jpg" alt=""
|
|
class="img-fluid img-fluid p-1 border">
|
|
</a>
|
|
<a data-bs-toggle="modal" data-target="#exampleModal"
|
|
data-whatever="layout-10">
|
|
<img src="../assets//images/layout/layout-10.jpg" alt=""
|
|
class="img-fluid img-fluid p-1 border">
|
|
</a>
|
|
<a data-bs-toggle="modal" data-target="#exampleModal"
|
|
data-whatever="layout-11">
|
|
<img src="../assets//images/layout/layout-11.jpg" alt=""
|
|
class="img-fluid img-fluid p-1 border">
|
|
</a>
|
|
<a data-bs-toggle="modal" data-target="#exampleModal"
|
|
data-whatever="layout-12">
|
|
<img src="../assets//images/layout/layout-12.jpg" alt=""
|
|
class="img-fluid img-fluid p-1 border">
|
|
</a>
|
|
<a data-bs-toggle="modal" data-target="#exampleModal"
|
|
data-whatever="layout-13">
|
|
<img src="../assets//images/layout/layout-13.jpg" alt=""
|
|
class="img-fluid img-fluid p-1 border">
|
|
</a>
|
|
<a data-bs-toggle="modal" data-target="#exampleModal"
|
|
data-whatever="layout-14">
|
|
<img src="../assets//images/layout/layout-14.jpg" alt=""
|
|
class="img-fluid img-fluid p-1 border">
|
|
</a>
|
|
</div>
|
|
<div class="alert alert-danger" role="alert">
|
|
<h4 class="alert-heading"><i class="icon feather icon-x-circle me-2"></i>In
|
|
prebuild Layout some of theme customizer option not worked</h4>
|
|
<hr class="opacity-100">
|
|
<p class="mb-1">dark,RTL,menu header position should <b class="f-w-500">not
|
|
working in some of layout</b></p>
|
|
<p class="mb-0">to get <b class="f-w-500">available supported option</b> in
|
|
pre-build layout plz check <b class="f-w-500">respected page</b> in
|
|
theme package</p>
|
|
</div>
|
|
<div class="alert alert-warning mb-0" role="alert">
|
|
<h4 class="alert-heading"><i
|
|
class="feather icon-alert-triangle me-2"></i>Take care when add
|
|
class</h4>
|
|
<hr class="opacity-100">
|
|
<p class="mb-1">be careful while adding a class in header, menu & body using
|
|
prebuild layouts</p>
|
|
<p class="mb-0">the class will be separated by the <b
|
|
class="f-w-500">space(" ")</b> so you <b class="f-w-500">don't need
|
|
to add commas(",") or dash("-")</b> to separated two class</p>
|
|
</div>
|
|
<h5 class="mt-4">Steps to use pre-build layouts</h5>
|
|
<ol class="mt-2">
|
|
<li>Open <code>/gulpfile.js</code> file at root directory of theme package.
|
|
</li>
|
|
<li>Find the code <code>const layout = {</code> in <code>/gulpfile.js</code>
|
|
file.</li>
|
|
<li>Replace the whole <code>const layout = {</code> block with respected
|
|
given code which you can find given below for different layout.</li>
|
|
<li>For other supported customization option you need to refer the respected
|
|
layout pages in the theme package.</li>
|
|
</ol>
|
|
<h5 class="mt-4">Variable description</h5>
|
|
<hr class="mt-2 mb-3">
|
|
<div class="table-responsive">
|
|
<table class="table table-bordered table-hover">
|
|
<thead>
|
|
<tr>
|
|
<th>Variable</th>
|
|
<th>Description</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><code>layouts</code></td>
|
|
<td class="text-wrap">This variable store value of layout
|
|
types<br>eg.<code>vertical</code>,<code>horizontal</code>,<code>combine</code>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>sublayouts</code></td>
|
|
<td class="text-wrap">This variable store prebuild layout
|
|
types<br>
|
|
<h6 class="mb-0 mt-2">Horizontal</h6>
|
|
eg.<code>v1</code>,<code>v2</code>,<code>layout8</code>,<code>layout9</code>,<code>layout10</code>,<code>layout13</code>
|
|
<h6 class="mb-0 mt-2">Vertical</h6>
|
|
eg.<code>layout1</code>,<code>layout2</code>,<code>layout3</code>,<code>layout4</code>,<code>layout5</code>,<code>layout11</code>,<code>layout12</code>,<code>layout14</code>
|
|
<h6 class="mb-0 mt-2">Combine</h6>
|
|
eg.<code>layout6</code>,<code>layout7</code>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>darktheme</code></td>
|
|
<td class="text-wrap">This variable store <code>true</code> /
|
|
<code>false</code> value for making <b class="f-w-600">dark
|
|
theme</b><br>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>rtltheme</code></td>
|
|
<td class="text-wrap">
|
|
This variable store <code>true</code> / <code>false</code>
|
|
value for making <b class="f-w-600">RTL theme</b><br>
|
|
<div class="alert alert-primary mb-0 mt-3" role="alert">
|
|
<h4 class="alert-heading d-inline-block mb-0">
|
|
<i class="feather icon-info"></i>
|
|
<small>If you are using <b
|
|
class="f-w-500">Horizontal layout</b> with
|
|
<b class="f-w-500">RTL theme</b> then you need
|
|
to add <code>dir="rtl"</code> in
|
|
<code>html</code> tag</small>
|
|
</h4>
|
|
<hr>
|
|
eg.<code><html dir="rtl"></code>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>bodyclass</code></td>
|
|
<td class="text-wrap">This variable store value which add in
|
|
body class<br>
|
|
<h6 class="mb-0 mt-2">Horizontal</h6>
|
|
eg.<code>layout-8</code>,<code>layout-9</code>,<code>layout-10</code>,<code>layout-13</code>
|
|
<h6 class="mb-0 mt-2">Vertical</h6>
|
|
eg.<code>layout-1</code>,<code>layout-2</code>,<code>layout-3</code>,<code>layout-4</code>,<code>layout-5</code>,<code>layout-11</code>,<code>layout-12</code>,<code>layout-14</code>
|
|
<h6 class="mb-0 mt-2">Combine</h6>
|
|
eg.<code>layout-6</code>,<code>layout-7</code>
|
|
<h6 class="mb-0 mt-2">Box layout</h6>
|
|
eg.<code>container</code>,<code>box-layout</code> add both
|
|
class
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>menuclass</code></td>
|
|
<td class="text-wrap">This variable store value which add in
|
|
right navbar class<br>
|
|
eg.<code>menupos-fixed</code> . . .
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>headerclass</code></td>
|
|
<td class="text-wrap">This variable store value which add in
|
|
right header class<br>
|
|
eg.<code>headerpos-fixed</code> . . .
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div class="card-body pb-0">
|
|
<h5>Vertical</h5>
|
|
<hr class="mb-0">
|
|
</div>
|
|
<ul class="nav nav-pills mb-0" id="pills-tab-glpvr" role="tablist">
|
|
<li class="nav-item">
|
|
<a class="nav-link active show" id="pills-layout1-tab" data-bs-toggle="pill"
|
|
href="#pills-layout1" role="tab">Layout 1</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="pills-layout2-tab" data-bs-toggle="pill"
|
|
href="#pills-layout2" role="tab">Layout 2</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="pills-layout3-tab" data-bs-toggle="pill"
|
|
href="#pills-layout3" role="tab">Layout 3</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="pills-layout4-tab" data-bs-toggle="pill"
|
|
href="#pills-layout4" role="tab">Layout 4</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="pills-layout5-tab" data-bs-toggle="pill"
|
|
href="#pills-layout5" role="tab">Layout 5</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="pills-layout11-tab" data-bs-toggle="pill"
|
|
href="#pills-layout11" role="tab">Layout 11</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="pills-layout12-tab" data-bs-toggle="pill"
|
|
href="#pills-layout12" role="tab">Layout 12</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="pills-layout14-tab" data-bs-toggle="pill"
|
|
href="#pills-layout14" role="tab">Layout 14</a>
|
|
</li>
|
|
</ul>
|
|
<div class="tab-content mb-0 pt-2" id="pills-tabContent-glpvvr">
|
|
<div class="tab-pane active show" id="pills-layout1" role="tabpanel"
|
|
aria-labelledby="pills-layout1-tab">
|
|
<div class="row">
|
|
<div class="col">
|
|
<pre class="line-numbers language-js">
|
|
<code class="language-js">
|
|
const layout = {
|
|
'layouts':'vertical',
|
|
'sublayouts':'layout1',
|
|
'darktheme':'false',
|
|
'rtltheme':'false',
|
|
'bodyclass':'layout-1',
|
|
'menuclass':'menupos-fixed',
|
|
'headerclass':'headerpos-fixed',
|
|
}
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
<div class="col-auto">
|
|
<img src="../assets//images/layout/layout-1.jpg" alt=""
|
|
class="img-fluid img-fluid p-1 border">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="tab-pane" id="pills-layout2" role="tabpanel"
|
|
aria-labelledby="pills-layout2-tab">
|
|
<div class="row">
|
|
<div class="col">
|
|
<pre class="line-numbers language-js">
|
|
<code class="language-js">
|
|
const layout = {
|
|
'layouts':'vertical',
|
|
'sublayouts':'layout2',
|
|
'darktheme':'false',
|
|
'rtltheme':'false',
|
|
'bodyclass':'layout-2',
|
|
'menuclass':'menupos-fixed navbar-blue',
|
|
'headerclass':'headerpos-fixed',
|
|
}
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
<div class="col-auto">
|
|
<img src="../assets//images/layout/layout-2.jpg" alt=""
|
|
class="img-fluid img-fluid p-1 border">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="tab-pane" id="pills-layout3" role="tabpanel"
|
|
aria-labelledby="pills-layout3-tab">
|
|
<div class="row">
|
|
<div class="col">
|
|
<pre class="line-numbers language-js">
|
|
<code class="language-js">
|
|
const layout = {
|
|
'layouts':'vertical',
|
|
'sublayouts':'layout3',
|
|
'darktheme':'false',
|
|
'rtltheme':'false',
|
|
'bodyclass':'layout-3',
|
|
'menuclass':'menupos-fixed menu-light brand-blue',
|
|
'headerclass':'headerpos-fixed header-blue',
|
|
}
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
<div class="col-auto">
|
|
<img src="../assets//images/layout/layout-3.jpg" alt=""
|
|
class="img-fluid img-fluid p-1 border">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="tab-pane" id="pills-layout4" role="tabpanel"
|
|
aria-labelledby="pills-layout4-tab">
|
|
<div class="row">
|
|
<div class="col">
|
|
<pre class="line-numbers language-js">
|
|
<code class="language-js">
|
|
const layout = {
|
|
'layouts':'vertical',
|
|
'sublayouts':'layout4',
|
|
'darktheme':'false',
|
|
'rtltheme':'false',
|
|
'bodyclass':'layout-4',
|
|
'menuclass':'menu-light brand-info icon-colored',
|
|
'headerclass':'header-blue',
|
|
}
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
<div class="col-auto">
|
|
<img src="../assets//images/layout/layout-4.jpg" alt=""
|
|
class="img-fluid img-fluid p-1 border">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="tab-pane" id="pills-layout5" role="tabpanel"
|
|
aria-labelledby="pills-layout5-tab">
|
|
<div class="row">
|
|
<div class="col">
|
|
<pre class="line-numbers language-js">
|
|
<code class="language-js">
|
|
const layout = {
|
|
'layouts':'vertical',
|
|
'sublayouts':'layout5',
|
|
'darktheme':'false',
|
|
'rtltheme':'false',
|
|
'bodyclass':'layout-5',
|
|
'menuclass':'',
|
|
'headerclass':'',
|
|
}
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
<div class="col-auto">
|
|
<img src="../assets//images/layout/layout-5.jpg" alt=""
|
|
class="img-fluid img-fluid p-1 border">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="tab-pane" id="pills-layout11" role="tabpanel"
|
|
aria-labelledby="pills-layout11-tab">
|
|
<div class="row">
|
|
<div class="col">
|
|
<pre class="line-numbers language-js">
|
|
<code class="language-js">
|
|
const layout = {
|
|
'layouts':'vertical',
|
|
'sublayouts':'layout11',
|
|
'darktheme':'false',
|
|
'rtltheme':'false',
|
|
'bodyclass':'layout-11',
|
|
'menuclass':'menupos-fixed',
|
|
'headerclass':'headerpos-fixed',
|
|
}
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
<div class="col-auto">
|
|
<img src="../assets//images/layout/layout-11.jpg" alt=""
|
|
class="img-fluid img-fluid p-1 border">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="tab-pane" id="pills-layout12" role="tabpanel"
|
|
aria-labelledby="pills-layout12-tab">
|
|
<div class="row">
|
|
<div class="col">
|
|
<pre class="line-numbers language-js">
|
|
<code class="language-js">
|
|
const layout = {
|
|
'layouts':'vertical',
|
|
'sublayouts':'layout12',
|
|
'darktheme':'false',
|
|
'rtltheme':'false',
|
|
'bodyclass':'layout-12',
|
|
'menuclass':'menupos-fixed menu-light',
|
|
'headerclass':'headerpos-fixed',
|
|
}
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
<div class="col-auto">
|
|
<img src="../assets//images/layout/layout-12.jpg" alt=""
|
|
class="img-fluid img-fluid p-1 border">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="tab-pane" id="pills-layout14" role="tabpanel"
|
|
aria-labelledby="pills-layout14-tab">
|
|
<div class="row">
|
|
<div class="col">
|
|
<pre class="line-numbers language-js">
|
|
<code class="language-js">
|
|
const layout = {
|
|
'layouts':'vertical',
|
|
'sublayouts':'layout14',
|
|
'darktheme':'false',
|
|
'rtltheme':'false',
|
|
'bodyclass':'layout-14',
|
|
'menuclass':'menupos-fixed navbar-collapsed',
|
|
'headerclass':'headerpos-fixed',
|
|
}
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
<div class="col-auto">
|
|
<img src="../assets//images/layout/layout-14.jpg" alt=""
|
|
class="img-fluid img-fluid p-1 border">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-body pb-0">
|
|
<h5>Horizontal</h5>
|
|
<hr class="mb-0">
|
|
</div>
|
|
<ul class="nav nav-pills mb-0" id="pills-tab-glphr" role="tablist">
|
|
<li class="nav-item">
|
|
<a class="nav-link active show" id="pills-layout8-tab"
|
|
data-bs-toggle="pill" href="#pills-layout8" role="tab">Layout 8</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="pills-layout9-tab" data-bs-toggle="pill"
|
|
href="#pills-layout9" role="tab">Layout 9</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="pills-layout10-tab" data-bs-toggle="pill"
|
|
href="#pills-layout10" role="tab">Layout 10</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="pills-layout13-tab" data-bs-toggle="pill"
|
|
href="#pills-layout13" role="tab">Layout 13</a>
|
|
</li>
|
|
</ul>
|
|
<div class="tab-content mb-0 pt-2" id="pills-tabContent-glphr">
|
|
<div class="tab-pane active show" id="pills-layout8" role="tabpanel"
|
|
aria-labelledby="pills-layout8-tab">
|
|
<div class="row">
|
|
<div class="col">
|
|
<pre class="line-numbers language-js">
|
|
<code class="language-js">
|
|
const layout = {
|
|
'layouts':'horizontal',
|
|
'sublayouts':'layout8',
|
|
'darktheme':'false',
|
|
'rtltheme':'false',
|
|
'bodyclass':'layout-8',
|
|
'menuclass':'',
|
|
'headerclass':'',
|
|
}
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
<div class="col-auto">
|
|
<img src="../assets//images/layout/layout-8.jpg" alt=""
|
|
class="img-fluid img-fluid p-1 border">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="tab-pane" id="pills-layout9" role="tabpanel"
|
|
aria-labelledby="pills-layout9-tab">
|
|
<div class="row">
|
|
<div class="col">
|
|
<pre class="line-numbers language-js">
|
|
<code class="language-js">
|
|
const layout = {
|
|
'layouts':'horizontal',
|
|
'sublayouts':'layout9',
|
|
'darktheme':'false',
|
|
'rtltheme':'false',
|
|
'bodyclass':'layout-9',
|
|
'menuclass':'container navbar-blue',
|
|
'headerclass':'',
|
|
}
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
<div class="col-auto">
|
|
<img src="../assets//images/layout/layout-9.jpg" alt=""
|
|
class="img-fluid img-fluid p-1 border">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="tab-pane" id="pills-layout10" role="tabpanel"
|
|
aria-labelledby="pills-layout10-tab">
|
|
<div class="row">
|
|
<div class="col">
|
|
<pre class="line-numbers language-js">
|
|
<code class="language-js">
|
|
const layout = {
|
|
'layouts':'horizontal',
|
|
'sublayouts':'layout10',
|
|
'darktheme':'false',
|
|
'rtltheme':'false',
|
|
'bodyclass':'',
|
|
'menuclass':'theme-horizontal menu-light icon-colored',
|
|
'headerclass':'header-blue',
|
|
}
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
<div class="col-auto">
|
|
<img src="../assets//images/layout/layout-10.jpg" alt=""
|
|
class="img-fluid img-fluid p-1 border">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="tab-pane" id="pills-layout13" role="tabpanel"
|
|
aria-labelledby="pills-layout13-tab">
|
|
<div class="row">
|
|
<div class="col">
|
|
<pre class="line-numbers language-js">
|
|
<code class="language-js">
|
|
const layout = {
|
|
'layouts':'horizontal',
|
|
'sublayouts':'layout13',
|
|
'darktheme':'false',
|
|
'rtltheme':'false',
|
|
'bodyclass':'layout-13',
|
|
'menuclass':'theme-horizontal navbar-blue',
|
|
'headerclass':'',
|
|
}
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
<div class="col-auto">
|
|
<img src="../assets//images/layout/layout-13.jpg" alt=""
|
|
class="img-fluid img-fluid p-1 border">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-body pb-0">
|
|
<h5>Combine</h5>
|
|
<hr class="mb-0">
|
|
</div>
|
|
<ul class="nav nav-pills mb-0" id="pills-tab-glpcb" role="tablist">
|
|
<li class="nav-item">
|
|
<a class="nav-link active show" id="pills-layout6-tab" data-bs-toggle="pill"
|
|
href="#pills-layout6" role="tab">Layout 6</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="pills-layout7-tab" data-bs-toggle="pill"
|
|
href="#pills-layout7" role="tab">Layout 7</a>
|
|
</li>
|
|
</ul>
|
|
<div class="tab-content mb-0 pt-2" id="pills-tabContent-glpcb">
|
|
<div class="tab-pane active show" id="pills-layout6" role="tabpanel"
|
|
aria-labelledby="pills-layout6-tab">
|
|
<div class="row">
|
|
<div class="col">
|
|
<pre class="line-numbers language-js">
|
|
<code class="language-js">
|
|
const layout = {
|
|
'layouts':'combine',
|
|
'sublayouts':'layout-6',
|
|
'darktheme':'false',
|
|
'rtltheme':'false',
|
|
'bodyclass':'layout-6',
|
|
'menuclass':'',
|
|
'headerclass':'',
|
|
'combineHmenuclass':'',
|
|
}
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
<div class="col-auto">
|
|
<img src="../assets//images/layout/layout-6.jpg" alt=""
|
|
class="img-fluid img-fluid p-1 border">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="tab-pane" id="pills-layout7" role="tabpanel"
|
|
aria-labelledby="pills-layout7-tab">
|
|
<div class="row">
|
|
<div class="col">
|
|
<pre class="line-numbers language-js">
|
|
<code class="language-js">
|
|
const layout = {
|
|
'layouts':'combine',
|
|
'sublayouts':'layout-7',
|
|
'darktheme':'false',
|
|
'rtltheme':'false',
|
|
'bodyclass':'layout-7',
|
|
'menuclass':'brand-blue',
|
|
'headerclass':'header-blue',
|
|
'combineHmenuclass':'menu-light',
|
|
}
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
<div class="col-auto">
|
|
<img src="../assets//images/layout/layout-7.jpg" alt=""
|
|
class="img-fluid img-fluid p-1 border">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-body pb-0">
|
|
<h5>Gulp page customizer</h5>
|
|
<hr class="mb-0">
|
|
</div>
|
|
<ul class="nav nav-pills mb-0" id="pills-glp-tab" role="tablist">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" id="pills-glp-vertical-tab" data-bs-toggle="pill"
|
|
href="#pills-glp-vertical" role="tab" aria-controls="pills-glp-vertical"
|
|
aria-selected="true">Vertical</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="pills-glp-horizontal-tab" data-bs-toggle="pill"
|
|
href="#pills-glp-horizontal" role="tab"
|
|
aria-controls="pills-glp-horizontal"
|
|
aria-selected="false">Horizontal</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="pills-glp-box-tab" data-bs-toggle="pill"
|
|
href="#pills-glp-box" role="tab">Box layout</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="pills-glp-rtl-tab" data-bs-toggle="pill"
|
|
href="#pills-glp-rtl" role="tab">rtl layout</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="pills-glp-light-tab" data-bs-toggle="pill"
|
|
href="#pills-glp-light" role="tab">light layout</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="pills-glp-dark-tab" data-bs-toggle="pill"
|
|
href="#pills-glp-dark" role="tab">dark layout</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="pills-glp-color-tab" data-bs-toggle="pill"
|
|
href="#pills-glp-color" role="tab">Icon color lauout</a>
|
|
</li>
|
|
</ul>
|
|
<div class="tab-content mb-0 pt-2" id="pills-glp-tabContent">
|
|
<div class="tab-pane show active" id="pills-glp-vertical" role="tabpanel"
|
|
aria-labelledby="pills-glp-vertical-tab">
|
|
<p>Set <code>vertical</code> value in <code>layouts</code> variable</p>
|
|
<pre class="line-numbers language-js">
|
|
<code class="language-js">
|
|
const layout = {
|
|
'layouts':'vertical',
|
|
....
|
|
}
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
<div class="tab-pane" id="pills-glp-horizontal" role="tabpanel"
|
|
aria-labelledby="pills-glp-horizontal-tab">
|
|
<p>Set <code>horizontal</code> value in <code>layouts</code> variable</p>
|
|
<pre class="line-numbers language-js">
|
|
<code class="language-js">
|
|
const layout = {
|
|
'layouts':'horizontal',
|
|
....
|
|
}
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
<div class="tab-pane" id="pills-glp-box" role="tabpanel"
|
|
aria-labelledby="pills-glp-box-tab">
|
|
<p>Set <code>container box-layout</code> value in <code>bodyclass</code>
|
|
variable</p>
|
|
<p><span class="text-c-red">*</span> Make sure that you have set
|
|
<code>vertical</code> value in <code>layouts</code> variable
|
|
</p>
|
|
<pre class="line-numbers language-js">
|
|
<code class="language-js">
|
|
const layout = {
|
|
'layouts':'vertical',
|
|
....
|
|
'bodyclass': 'container box-layout',
|
|
'menuclass': 'menupos-fixed menu-light brand-blue navbar-collapsed',
|
|
....
|
|
}
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
<div class="tab-pane" id="pills-glp-rtl" role="tabpanel"
|
|
aria-labelledby="pills-glp-rtl-tab">
|
|
<p>Set <code>true</code> value in <code>rtltheme</code> variable</p>
|
|
<p><span class="text-c-red">*</span> Make sure that you have set
|
|
<code>vertical</code> value in <code>layouts</code> variable
|
|
</p>
|
|
<pre class="line-numbers language-js">
|
|
<code class="language-js">
|
|
const layout = {
|
|
'layouts':'vertical',
|
|
....
|
|
'rtltheme': 'true',
|
|
....
|
|
}
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
<div class="tab-pane" id="pills-glp-light" role="tabpanel"
|
|
aria-labelledby="pills-glp-light-tab">
|
|
<p>Set <code>menu-light</code> value in <code>menuclass</code> variable</p>
|
|
<pre class="line-numbers language-js">
|
|
<code class="language-js">
|
|
const layout = {
|
|
....
|
|
'menuclass': 'menu-light',
|
|
....
|
|
}
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
<div class="tab-pane" id="pills-glp-dark" role="tabpanel"
|
|
aria-labelledby="pills-glp-dark-tab">
|
|
<p>Set <code>true</code> value in <code>darktheme</code> variable</p>
|
|
<pre class="line-numbers language-js">
|
|
<code class="language-js">
|
|
const layout = {
|
|
....
|
|
'darktheme': 'true',
|
|
....
|
|
}
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
<div class="tab-pane" id="pills-glp-color" role="tabpanel"
|
|
aria-labelledby="pills-glp-color-tab">
|
|
<p>Set <code>icon-colored</code> value in <code>menuclass</code> variable
|
|
</p>
|
|
<pre class="line-numbers language-js">
|
|
<code class="language-js">
|
|
const layout = {
|
|
....
|
|
'menuclass': 'icon-colored',
|
|
....
|
|
}
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
|
|
aria-hidden="true">
|
|
<div class="modal-dialog modal-xl modal-dialog-centered" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="exampleModalLabel"></h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<img src="../assets//images/layout/big/layout-1.jpg" alt="" class="img-fluid img-fluid p-1 border">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- required JS -->
|
|
<script src="../assets//js/vendor-all.min.js"></script>
|
|
<script src="../assets//plugins/bootstrap/js/bootstrap.min.js"></script>
|
|
<script src="../assets//js/pcoded.min.js"></script>
|
|
<script src="../assets//plugins/prism/js/prism.min.js"></script>
|
|
|
|
<!-- custom JS -->
|
|
<script type="text/javascript">
|
|
$('body').scroll(function () {
|
|
$('.nav-item').removeClass('pcoded-trigger');
|
|
});
|
|
$(".pcoded-inner-navbar a").on('click', function (event) {
|
|
if (this.hash !== "") {
|
|
event.preventDefault();
|
|
var hash = this.hash;
|
|
$('html, body').animate({
|
|
scrollTop: ($(hash).offset().top)
|
|
}, 1500, function () {
|
|
window.location.hash = hash;
|
|
});
|
|
}
|
|
});
|
|
|
|
$('#exampleModal').on('show.bs.modal', function (event) {
|
|
var button = $(event.relatedTarget)
|
|
var recipient = button.data('whatever')
|
|
var modal = $(this)
|
|
modal.find('.modal-title').text('Prebuild ' + recipient)
|
|
modal.find('.modal-body img').attr('src', 'assets/images/layout/big/' + recipient + '.jpg')
|
|
})
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html> |