385 lines
18 KiB
HTML
385 lines
18 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
|
|
<meta charset="utf-8" />
|
|
<title>Horizontal Layouts | Skote - Vuejs Admin & Dashboard Template | Docs</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta content="Skote Premium Multipurpose Admin & Dashboard Template documentation of vuejs" name="description" />
|
|
<meta content="Themesbrand" name="author" />
|
|
<meta name="keywords" content="Skote admin documentation, Skote Vuejs documentation">
|
|
<!-- App favicon -->
|
|
<link rel="shortcut icon" href="assets/images/favicon.ico">
|
|
<!-- Bootstrap Css -->
|
|
<link href="assets/css/bootstrap.min.css" id="bootstrap-style" rel="stylesheet" type="text/css" />
|
|
<!-- Icons Css -->
|
|
<link href="assets/css/icons.min.css" rel="stylesheet" type="text/css" />
|
|
<!-- App Css-->
|
|
<link href="assets/css/app.min.css" id="app-style" rel="stylesheet" type="text/css" />
|
|
|
|
</head>
|
|
|
|
<body data-topbar="dark" data-spy="scroll" data-target=".right-side-nav"
|
|
data-offset="175">
|
|
|
|
<!-- Begin page -->
|
|
<div id="layout-wrapper">
|
|
|
|
<header id="page-topbar">
|
|
<div class="navbar-header">
|
|
<div class="d-flex">
|
|
<!-- LOGO -->
|
|
<div class="navbar-brand-box">
|
|
<a href="index.html" class="logo logo-light">
|
|
<span class="logo-sm">
|
|
<img src="assets/images/logo-light.svg" alt="" height="25">
|
|
</span>
|
|
<span class="logo-lg">
|
|
<img src="assets/images/logo-light.png" alt="" height="20"> <span class="badge badge-soft-success ml-2">Vuejs & Laravel-vue</span>
|
|
</span>
|
|
</a>
|
|
</div>
|
|
|
|
<button type="button" class="btn btn-sm px-3 font-size-24
|
|
header-item waves-effect d-lg-none" id="vertical-menu-btn">
|
|
<i class="mdi mdi-menu"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="d-flex">
|
|
<div class="d-inline-block">
|
|
<a
|
|
href="https://themeforest.net/item/skote-vuejs-admin-dashboard-template/25444550"
|
|
target="_blank" class="header-item">Support</a>
|
|
</div>
|
|
|
|
<div class="d-none d-md-inline-block">
|
|
<a
|
|
href="https://docs.google.com/forms/d/e/1FAIpQLSfiP9bDHzIQdQoMXFrYvJx00wyFzSu_cqBWP0N0uUHpqjrbzQ/viewform"
|
|
target="_blank" class="header-item">Need Customization?</a>
|
|
</div>
|
|
|
|
<div class="d-inline-block">
|
|
<a href="https://1.envato.market/skote-vuejs" target="_blank"
|
|
class="header-item">Buy Now</a>
|
|
</div>
|
|
|
|
<div class="d-inline-block">
|
|
<h5 class="header-item m-0"><span class="badge badge-danger">v3.4.0</span></h5>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- ========== Left Sidebar Start ========== -->
|
|
<div class="vertical-menu">
|
|
|
|
<div data-simplebar class="h-100">
|
|
|
|
<!--- Sidemenu -->
|
|
<div id="sidebar-menu">
|
|
<!-- Left Menu Start -->
|
|
<ul class="metismenu list-unstyled" id="side-menu">
|
|
<li class="menu-title">Docs</li>
|
|
|
|
<li>
|
|
<a href="index.html" class="waves-effect">
|
|
<i class="mdi mdi-text-box-outline"></i>
|
|
<span>Introduction</span>
|
|
</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="setup-vue.html" class="waves-effect">
|
|
<i class="mdi mdi-cog-outline"></i>
|
|
<span>Setup Vuejs</span>
|
|
</a>
|
|
|
|
<a href="setup-laravel-vue.html" class="waves-effect">
|
|
<i class="mdi mdi-cog-outline"></i>
|
|
<span>Setup Laravel-vue</span>
|
|
</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="create-new-page.html" class="waves-effect">
|
|
<i class="mdi mdi-card-plus-outline"></i>
|
|
<span>Create a New page</span>
|
|
</a>
|
|
</li>
|
|
|
|
<li class="menu-title">Layouts</li>
|
|
|
|
<li>
|
|
<a href="vertical.html" class="waves-effect">
|
|
<i class="mdi mdi-flip-horizontal"></i>
|
|
<span>Vertical</span>
|
|
</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="horizontal.html" class="waves-effect">
|
|
<i class="mdi mdi-flip-vertical"></i>
|
|
<span>Horizontal</span>
|
|
</a>
|
|
</li>
|
|
|
|
<li class="menu-title">Themes</li>
|
|
|
|
<li>
|
|
<a href="light.html" class="waves-effect">
|
|
<i class="mdi mdi-white-balance-sunny"></i>
|
|
<span>Light Version</span>
|
|
</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="dark.html" class="waves-effect">
|
|
<i class="mdi mdi-weather-night"></i>
|
|
<span>Dark Version</span>
|
|
</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="rtl.html" class="waves-effect">
|
|
<i class="mdi mdi-web"></i>
|
|
<span>RTL Version</span>
|
|
</a>
|
|
</li>
|
|
|
|
<li class="menu-title">Other</li>
|
|
|
|
<li>
|
|
<a href="plugins.html" class="waves-effect">
|
|
<i class="mdi mdi-format-list-bulleted"></i>
|
|
<span>Plugins</span>
|
|
</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="changelog.html" class="waves-effect">
|
|
<i class="mdi mdi-format-list-bulleted"></i>
|
|
<span>Changelog</span>
|
|
</a>
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
<!-- Sidebar -->
|
|
</div>
|
|
</div>
|
|
<!-- Left Sidebar End -->
|
|
|
|
<!-- ============================================================== -->
|
|
<!-- Start right Content here -->
|
|
<!-- ============================================================== -->
|
|
<div class="main-content">
|
|
|
|
<div class="page-content">
|
|
<div class="container-fluid">
|
|
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="p-lg-1">
|
|
|
|
<div class="d-xl-flex">
|
|
|
|
<div class="w-100">
|
|
|
|
<h4 class="mt-0 mb-4">How to
|
|
Create a Custom Page</h4>
|
|
|
|
<h6>Vuejs</h6>
|
|
<p>
|
|
Here is the example on
|
|
how to create your
|
|
custom page and add it
|
|
to the leftsidebar menu
|
|
and breadcrumbs.
|
|
</p>
|
|
<p>1. Create a component in the <code>src/router/views/demo.vue</code> with name
|
|
<code>demo.vue</code>.</p>
|
|
<p class="ml-3">Ex :-</p>
|
|
<div class="ml-4">
|
|
<pre class="bg-dark
|
|
text-white p-3">
|
|
<code>
|
|
<script>
|
|
import Layout from '../../layouts/main'
|
|
import PageHeader from '@/components/page-header'
|
|
|
|
export default {
|
|
components: { Layout, PageHeader },
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<Layout>
|
|
<PageHeader :title="title" :items="items" />
|
|
This is New Page
|
|
</Layout>
|
|
</template>
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
<p>2. Set the route in <code>/src/router/routes.js</code></p>
|
|
<p class="ml-3">Ex :-</p>
|
|
<div class="ml-4">
|
|
<pre class="bg-dark text-white p-3">
|
|
{
|
|
path: "/demo",
|
|
name: "sample-page',
|
|
meta: { authRequired: true },
|
|
component: () => import('./views/demo')
|
|
},
|
|
</pre>
|
|
</div>
|
|
<p>3. Add link of the page in Vertical Layout and Horizontal Layout. Add menu id, label
|
|
and link in JSON object.
|
|
</p>
|
|
<p>For Vertical Layout :- <code>/src/components/menu.js</code></p>
|
|
<p>For Horizontal Layout :- <code>/src/components/horizontal-menu.js</code></p>
|
|
<p class="ml-3">Ex :-</p>
|
|
<div class="ml-4">
|
|
<pre class="bg-dark
|
|
text-white p-3">
|
|
{
|
|
id: 1,
|
|
label: "menuitems.demo.text",
|
|
icon: "bx-file",
|
|
link: "/demo"
|
|
},
|
|
</pre>
|
|
</div>
|
|
<p>4. Add page name in <code>src/locales/en.json </code> file.
|
|
</p>
|
|
<p class="ml-3">Ex :-</p>
|
|
<div class="ml-4">
|
|
<pre class="bg-dark
|
|
text-white p-3">
|
|
{
|
|
"menuitems": {
|
|
"demo": {
|
|
"text": "Demo"
|
|
}
|
|
}
|
|
},
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<h6 class="mt-3">Laravel-vue</h6>
|
|
<p>
|
|
Here is the example on
|
|
how to create your
|
|
custom page and add it
|
|
to the leftsidebar menu
|
|
and breadcrumbs.
|
|
</p>
|
|
<p>1. Create a component in the <code>/resources/js/views/demo.vue</code> with name
|
|
<code>demo.vue</code>.</p>
|
|
<p class="ml-3">Ex :-</p>
|
|
<div class="ml-4">
|
|
<pre class="bg-dark
|
|
text-white p-3">
|
|
<code>
|
|
<script>
|
|
import Layout from '../../layouts/main';
|
|
import PageHeader from '@/components/page-header';
|
|
|
|
export default {
|
|
components: { Layout, PageHeader },
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<Layout>
|
|
<PageHeader :title="title" :items="items" />
|
|
This is New Page
|
|
</Layout>
|
|
</template>
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
<p>2. Set the route in <code>/resources/js/views/index.js</code></p>
|
|
<p class="ml-3">Ex :-</p>
|
|
<div class="ml-4">
|
|
<pre class="bg-dark text-white p-3">
|
|
Vue.component("demo", require("./demo").default);
|
|
</pre>
|
|
</div>
|
|
<p>3. Add link of the page in Vertical Layout and Horizontal Layout. Add menu id, label
|
|
and link in JSON object.
|
|
</p>
|
|
<p>For Vertical Layout :- <code>/resources/js/components/menu.js</code></p>
|
|
<p>For Horizontal Layout :- <code>/resources/js/components/horizontal-menu.js</code></p>
|
|
<p class="ml-3">Ex :-</p>
|
|
<div class="ml-4">
|
|
<pre class="bg-dark
|
|
text-white p-3">
|
|
{
|
|
id: 1,
|
|
label: "menuitems.demo.text",
|
|
icon: "bx-file",
|
|
link: "/demo"
|
|
},
|
|
</pre>
|
|
</div>
|
|
<p>4. Add page name in <code>/resources/js/locales/en.json </code> file.
|
|
</p>
|
|
<p class="ml-3">Ex :-</p>
|
|
<div class="ml-4">
|
|
<pre class="bg-dark
|
|
text-white p-3">
|
|
{
|
|
"menuitems": {
|
|
"demo": {
|
|
"text": "Demo"
|
|
}
|
|
}
|
|
},
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
<!-- end card -->
|
|
</div>
|
|
</div>
|
|
<!-- end row -->
|
|
|
|
</div> <!-- container-fluid -->
|
|
</div>
|
|
<!-- End Page-content -->
|
|
<footer class="footer">
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<div class="col-sm-6">
|
|
<script>document.write(new Date().getFullYear())</script> © Themesbrand.
|
|
</div>
|
|
<div class="col-sm-6">
|
|
<div class="text-sm-right d-none d-sm-block">
|
|
Crafted with <i class="mdi mdi-heart text-danger"></i> by <a href="https://themesbrand.com/" target="_blank" class="text-muted">Themesbrand</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
<!-- end main content-->
|
|
|
|
</div>
|
|
<!-- END layout-wrapper -->
|
|
<!-- JAVASCRIPT -->
|
|
<script src="assets/libs/jquery/jquery.min.js"></script>
|
|
<script src="assets/libs/bootstrap/js/bootstrap.bundle.min.js"></script>
|
|
<script src="assets/libs/simplebar/simplebar.min.js"></script>
|
|
<script src="assets/libs/jquery.easing/jquery.easing.min.js"></script>
|
|
|
|
<script src="assets/js/app.js"></script>
|
|
|
|
</body>
|
|
</html>
|