admin-lte
Version:
Responsive open source admin dashboard and control panel.
465 lines (320 loc) • 17.3 kB
HTML
<html lang="en"> <head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Control Sidebar Component | AdminLTE 3 Documentation</title>
<!-- Begin Jekyll SEO tag v2.5.0 -->
<title>Control Sidebar Component | AdminLTE v3 Documentaion</title>
<meta name="generator" content="Jekyll v3.8.5" />
<meta property="og:title" content="Control Sidebar Component" />
<meta property="og:locale" content="en_US" />
<meta name="description" content="AdminLTE v3 Documentaion" />
<meta property="og:description" content="AdminLTE v3 Documentaion" />
<meta property="og:site_name" content="AdminLTE v3 Documentaion" />
<script type="application/ld+json">
{"description":"AdminLTE v3 Documentaion","@type":"WebPage","url":"/components/control-sidebar.html","headline":"Control Sidebar Component","@context":"http://schema.org"}</script>
<!-- End Jekyll SEO tag -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700">
<link rel="stylesheet" href="/assets/plugins/fontawesome-free/css/all.min.css">
<link rel="stylesheet" href="/assets/plugins/overlayScrollbars/css/OverlayScrollbars.min.css">
<link rel="stylesheet" href="/assets/css/docs.css">
<link rel="stylesheet" href="/assets/css/highlighter.css">
<link rel="stylesheet" href="/assets/css/adminlte.min.css">
</head>
<body class="hold-transition sidebar-mini layout-fixed layout-navbar-fixed">
<div class="wrapper"> <nav class="main-header navbar navbar-expand navbar-white navbar-light">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" data-widget="pushmenu" href="#"><i class="fa fa-bars"></i></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link bg-info rounded dropdown-toggle" href="#" id="navbarVersionDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
v3.0
</a>
<div class="dropdown-menu py-0" aria-labelledby="navbarVersionDropdown">
<a class="dropdown-item bg-info disabled" href="#">v3.0</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="https://adminlte.io/docs/2.4/installation">v2.4</a>
<a class="dropdown-item" href="https://adminlte.io/themes/AdminLTE/documentation/index.html"><= v2.3</a>
</div>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<!-- <li class="nav-item d-none d-sm-inline-block">
<a href="index3.html" class="nav-link">Home</a>
</li> -->
</ul>
<!-- SEARCH FORM -->
<!-- <form class="form-check-inline ml-3">
<div class="input-group input-group-sm">
<input class="form-control form-control-navbar" type="search" placeholder="Search" aria-label="Search">
<div class="input-group-append">
<button class="btn btn-navbar" type="submit">
<i class="fa fa-search"></i>
</button>
</div>
</div>
</form> -->
</nav>
<aside class="main-sidebar sidebar-dark-primary elevation-4">
<a href="/index.html" class="brand-link logo-switch">
<img src="/assets/img/logo-xs.png" alt="AdminLTE Docs Logo Small" class="brand-image-xl logo-xs">
<img src="/assets/img/logo-xl.png" alt="AdminLTE Docs Logo Large" class="brand-image-xs logo-xl" style="left: 12px">
</a>
<div class="sidebar">
<nav class="mt-2">
<ul class="nav nav-pills nav-sidebar nav-child-indent flex-column" data-widget="treeview" role="menu">
<li class="nav-item ">
<a href="/index.html" class="nav-link ">
<i class="nav-icon fas fa-microchip"></i>
<p>
Installation
</p>
</a>
</li>
<li class="nav-item ">
<a href="/dependencies.html" class="nav-link ">
<i class="nav-icon fas fa-handshake"></i>
<p>
Dependencies & Plugins
</p>
</a>
</li>
<li class="nav-item ">
<a href="/layout.html" class="nav-link ">
<i class="nav-icon fas fa-copy"></i>
<p>
Layout
</p>
</a>
</li>
<li class="nav-item has-treeview menu-open">
<a href="/components" class="nav-link active">
<i class="nav-icon fas fa-th"></i>
<p>
Components
<i class="right fas fa-angle-left"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="/components/main-header.html" class="nav-link ">
<i class="far fa-circle nav-icon"></i>
<p>Main Header</p>
</a>
</li>
<li class="nav-item">
<a href="/components/main-sidebar.html" class="nav-link ">
<i class="far fa-circle nav-icon"></i>
<p>Main Sidebar</p>
</a>
</li>
<li class="nav-item">
<a href="/components/control-sidebar.html" class="nav-link active">
<i class="far fa-circle nav-icon"></i>
<p>Control Sidebar</p>
</a>
</li>
<li class="nav-item">
<a href="/components/cards.html" class="nav-link ">
<i class="far fa-circle nav-icon"></i>
<p>Card</p>
</a>
</li>
<li class="nav-item">
<a href="/components/boxes.html" class="nav-link ">
<i class="far fa-circle nav-icon"></i>
<p>Small-/ Info-Box</p>
</a>
</li>
<li class="nav-item">
<a href="/components/direct-chat.html" class="nav-link ">
<i class="far fa-circle nav-icon"></i>
<p>Direct Chat</p>
</a>
</li>
<li class="nav-item">
<a href="/components/timeline.html" class="nav-link ">
<i class="far fa-circle nav-icon"></i>
<p>Timeline</p>
</a>
</li>
<li class="nav-item">
<a href="/components/ribbons.html" class="nav-link ">
<i class="far fa-circle nav-icon"></i>
<p>Ribbons</p>
</a>
</li>
<li class="nav-item">
<a href="/components/miscellaneous.html" class="nav-link ">
<i class="far fa-circle nav-icon"></i>
<p>Miscellaneous</p>
</a>
</li>
<li class="nav-item">
<a href="/components/plugins.html" class="nav-link ">
<i class="far fa-circle nav-icon"></i>
<p>Plugins</p>
</a>
</li>
</ul>
</li>
<li class="nav-item has-treeview ">
<a href="/javascript" class="nav-link ">
<i class="nav-icon fas fa-code"></i>
<p>
JavaScript
<i class="right fas fa-angle-left"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="/javascript/layout.html" class="nav-link ">
<i class="far fa-circle nav-icon"></i>
<p>Layout</p>
</a>
</li>
<li class="nav-item">
<a href="/javascript/push-menu.html" class="nav-link ">
<i class="far fa-circle nav-icon"></i>
<p>Push Menu</p>
</a>
</li>
<li class="nav-item">
<a href="/javascript/treeview.html" class="nav-link ">
<i class="far fa-circle nav-icon"></i>
<p>Treeview</p>
</a>
</li>
<li class="nav-item">
<a href="/javascript/card-widget.html" class="nav-link ">
<i class="far fa-circle nav-icon"></i>
<p>Card Widget</p>
</a>
</li>
<li class="nav-item">
<a href="/javascript/card-refresh.html" class="nav-link ">
<i class="far fa-circle nav-icon"></i>
<p>CardRefresh</p>
</a>
</li>
<li class="nav-item">
<a href="/javascript/control-sidebar.html" class="nav-link ">
<i class="far fa-circle nav-icon"></i>
<p>Control Sidebar</p>
</a>
</li>
<li class="nav-item">
<a href="/javascript/direct-chat.html" class="nav-link ">
<i class="far fa-circle nav-icon"></i>
<p>Direct Chat</p>
</a>
</li>
<li class="nav-item">
<a href="/javascript/todo-list.html" class="nav-link ">
<i class="far fa-circle nav-icon"></i>
<p>Todo List</p>
</a>
</li>
<li class="nav-item">
<a href="/javascript/toasts.html" class="nav-link ">
<i class="far fa-circle nav-icon"></i>
<p>Toasts</p>
</a>
</li>
</ul>
</li>
<li class="nav-item ">
<a href="/browser-support.html" class="nav-link ">
<i class="nav-icon fab fa-chrome"></i>
<p>
Browser Support
</p>
</a>
</li>
<li class="nav-item ">
<a href="/upgrade-guide.html" class="nav-link ">
<i class="nav-icon fas fa-hand-point-up"></i>
<p>
Upgrade Guide
</p>
</a>
</li>
<li class="nav-item ">
<a href="/implementations.html" class="nav-link ">
<i class="nav-icon fas fa-bookmark"></i>
<p>
Implementations
</p>
</a>
</li>
<li class="nav-item ">
<a href="/faq.html" class="nav-link ">
<i class="nav-icon fas fa-question-circle"></i>
<p>
FAQ
</p>
</a>
</li>
<li class="nav-item ">
<a href="/license.html" class="nav-link ">
<i class="nav-icon fas fa-file-alt"></i>
<p>
License
</p>
</a>
</li>
</ul>
</nav>
</div>
</aside>
<div class="content-wrapper px-4 py-2">
<div class="content-header">
<h1 class="text-dark">Control Sidebar Component</h1>
</div>
<div class="content px-2">
<p>Control sidebar is the right sidebar. It can be used for many purposes and is extremely easy to create. The sidebar ships with two different show/hide styles. The first allows the sidebar to slide over the content. The second pushes the content to make space for the sidebar. Either of these methods can be set through the <a href="/javascript/control-sidebar.html">Javascript options</a>.</p>
<p>The following code should be placed within the <code class="highlighter-rouge">.wrapper</code> div. I prefer to place it right after the footer.</p>
<h5 class="text-bold text-dark">Control Sidebar Push</h5>
<p>By adding the <code class="highlighter-rouge">.control-sidebar-push</code> to <code class="highlighter-rouge">body</code>, the sidebar pushes the content away instead of overlaying the content.
You can also add <code class="highlighter-rouge">.control-sidebar-push-slide</code> to <code class="highlighter-rouge">body</code>, to push the content away with an transition.</p>
<h5 class="text-bold text-dark">Dark Sidebar Markup</h5>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code> <span class="c"><!-- Control Sidebar --></span>
<span class="nt"><aside</span> <span class="na">class=</span><span class="s">"control-sidebar control-sidebar-dark"</span><span class="nt">></span>
<span class="c"><!-- Control sidebar content goes here --></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"p-3"</span><span class="nt">></span>
<span class="c"><!-- Content of the sidebar goes here --></span>
<span class="nt"></div></span>
<span class="nt"></aside></span>
<span class="c"><!-- /.control-sidebar --></span>
</code></pre></div></div>
<h5 class="text-bold text-dark mt-5">Light Sidebar Markup</h5>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code> <span class="c"><!-- Control Sidebar --></span>
<span class="nt"><aside</span> <span class="na">class=</span><span class="s">"control-sidebar control-sidebar-light"</span><span class="nt">></span>
<span class="c"><!-- Control sidebar content goes here --></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"p-3"</span><span class="nt">></span>
<span class="c"><!-- Content of the sidebar goes here --></span>
<span class="nt"></div></span>
<span class="nt"></aside></span>
<span class="c"><!-- /.control-sidebar --></span>
</code></pre></div></div>
<h5 class="text-bold text-dark mt-5">Control Sidebar Toggle Markup</h5>
<p>Once you create the sidebar, you will need a toggle button to open/close it. By adding the attribute data-toggle=”control-sidebar” to any button, it will automatically act as the toggle button.</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">data-widget=</span><span class="s">"control-sidebar"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Toggle Control Sidebar<span class="nt"></a></span>
</code></pre></div></div>
</div>
</div>
<footer class="main-footer">
<div class="float-right d-none d-sm-inline">
v3.0.1
</div>
<strong>Copyright © 2014-2019 <a href="https://adminlte.io">AdminLTE.io</a>.</strong> All rights reserved.
</footer>
</div>
<script src="/assets/plugins/jquery/jquery.min.js"></script>
<script src="/assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="/assets/plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js"></script>
<script src="/assets/js/adminlte.min.js"></script>
</body>
</html>