mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-12-22 18:30:14 +01:00
139 lines
No EOL
7.3 KiB
HTML
139 lines
No EOL
7.3 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||
<meta name="viewport" content="width=device-width">
|
||
<meta name="keywords" content="admin,dashboard,template,angular,bootstrap,blur,panel,html,css,javascript">
|
||
<title>ng2-admin documentation - Sidebar</title>
|
||
<link rel="alternate" href="http://localhost:8080/feed.xml" type="application/rss+xml" title="">
|
||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900italic,900|Anonymous+Pro:400,700,400italic,700italic&subset=latin,greek,greek-ext,vietnamese,cyrillic-ext,latin-ext,cyrillic">
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.2.0/gh-fork-ribbon.min.css">
|
||
<link rel="stylesheet" href="/ng2-admin/css/main.css">
|
||
<link rel="shortcut icon" href="/ng2-admin/images/favicon.png">
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<div class="nav-main">
|
||
<div class="wrap"><a href="/ng2-admin/" class="nav-home"><img src="/ng2-admin/images/logo.png" width="24" height="24" class="nav-logo"> <span class="blur-label">ng2-</span>admin</a>
|
||
<ul class="nav-site nav-site-internal">
|
||
<li><a href="/ng2-admin/">Home</a></li>
|
||
<li><a href="/ng2-admin/articles/001-getting-started/" class="active">Docs</a></li>
|
||
</ul><span class="nav-docs-right">Need some help? Let us know! <a href="mailto:contact@akveo.com">contact@akveo.com</a></span>
|
||
</div>
|
||
</div>
|
||
<section class="content wrap documentationContent">
|
||
<div class="nav-docs">
|
||
<div class="nav-docs section">
|
||
<h5>Quick Start</h5>
|
||
<ul>
|
||
<li><a href="/ng2-admin/articles/001-getting-started/">Getting Started</a></li>
|
||
<li><a href="/ng2-admin/articles/002-installation-guidelines/">Installation Guidelines</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="nav-docs section">
|
||
<h5>Customization</h5>
|
||
<ul>
|
||
<li><a href="/ng2-admin/articles/011-changing-color-scheme/">Changing Color Scheme</a></li>
|
||
<li><a href="/ng2-admin/articles/014-switch-to-blur-theme/">Enabling blur theme</a></li>
|
||
<li><a href="/ng2-admin/articles/012-project-structure/">Project Structure</a></li>
|
||
<li><a href="/ng2-admin/articles/013-create-new-page/">Create New Page</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="nav-docs section">
|
||
<h5>Components</h5>
|
||
<ul>
|
||
<li><a href="/ng2-admin/articles/016-spinner/">Theme Spinner</a></li>
|
||
<li><a href="/ng2-admin/articles/015-sidebar/" class="active">Sidebar</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="inner-content">
|
||
<h1>Sidebar</h1>
|
||
<div class="subHeader"></div><p>The sidebar provides a convenient way to navigate the application.
|
||
Only one sidebar is supported per angular application.
|
||
This means that sidebar is basically a singleton object.</p>
|
||
<p>Sidebar can be added to the page using the <code>BaSidebar</code> component:</p>
|
||
<pre><code class="lang-html"><span class="tag"><<span class="name">ba-sidebar</span>></span><span class="tag"></<span class="name">ba-sidebar</span>></span>
|
||
</code></pre>
|
||
<p>The sidebar contains a <code><ba-menu></ba-menu></code> component which defines and renders the application menu based on routes provided. Generally the <code>ba-menu</code> component can be used separately from <code>ba-sidebar</code>.
|
||
All menu items information is defined inside the <code>data</code> property of a route.</p>
|
||
<h2 id="menu-configuration">Menu Configuration</h2>
|
||
<p>All menu items are located inside the <code>src/app/app.routes.ts</code> file. Each route item can have a <code>menu</code> property under <code>data</code> defining a menu item:</p>
|
||
<pre><code class="lang-javascript"> {
|
||
<span class="comment">// first, router configuration</span>
|
||
path: <span class="string">'dashboard'</span>,
|
||
component: Dashboard,
|
||
data: {
|
||
<span class="comment">// here additionaly we define how the menu item should look</span>
|
||
menu: {
|
||
title: <span class="string">'Dashboard'</span>, <span class="comment">// menu title</span>
|
||
icon: <span class="string">'ion-android-home'</span>, <span class="comment">// menu icon</span>
|
||
selected: <span class="literal">false</span>, <span class="comment">// selected or not</span>
|
||
expanded: <span class="literal">false</span>, <span class="comment">// expanded or not (if item has children)</span>
|
||
order: <span class="number">0</span>, <span class="comment">// item order in the menu list,</span>
|
||
hidden: <span class="literal">true</span> <span class="comment">// hide menu item from a list but keep related features (breadcrumbs, page title)</span>
|
||
}
|
||
}
|
||
}
|
||
</code></pre>
|
||
<p>You also can define a list of sub-menu items like this:</p>
|
||
<pre><code class="lang-javascript"> {
|
||
<span class="comment">// parent route</span>
|
||
path: <span class="string">'charts'</span>,
|
||
component: Charts,
|
||
data: {
|
||
|
||
<span class="comment">// parent menu configuration</span>
|
||
menu: {
|
||
title: <span class="string">'Charts'</span>,
|
||
icon: <span class="string">'ion-stats-bars'</span>,
|
||
selected: <span class="literal">false</span>,
|
||
expanded: <span class="literal">false</span>,
|
||
order: <span class="number">200</span>,
|
||
}
|
||
},
|
||
|
||
<span class="comment">// children routes</span>
|
||
children: [
|
||
{
|
||
path: <span class="string">'chartist-js'</span>,
|
||
component: ChartistJs,
|
||
data: {
|
||
|
||
<span class="comment">// children menu item configuration</span>
|
||
menu: {
|
||
title: <span class="string">'Chartist.Js'</span>,
|
||
}
|
||
}
|
||
}
|
||
]
|
||
}
|
||
</code></pre>
|
||
<h1 id="custom-menu-items">Custom menu items</h1>
|
||
<p>You also can define a menu item not connected to any existing route in the application:</p>
|
||
<pre><code class="lang-javascript"> {
|
||
path: <span class="string">''</span>, <span class="comment">// just leave the path empty</span>
|
||
data: {
|
||
|
||
<span class="comment">// and define your menu item</span>
|
||
menu: {
|
||
title: <span class="string">'External Link'</span>, <span class="comment">// title</span>
|
||
url: <span class="string">'http://akveo.com'</span>, <span class="comment">// custom url</span>
|
||
icon: <span class="string">'ion-android-exit'</span>, <span class="comment">// icon</span>
|
||
order: <span class="number">800</span>, <span class="comment">// order</span>
|
||
target: <span class="string">'_blank'</span> <span class="comment">// target property of <a> tag (_self, _blank, etc)</span>
|
||
}
|
||
}
|
||
}
|
||
</code></pre>
|
||
|
||
</div>
|
||
</section>
|
||
<footer class="wrap">
|
||
<div class="left">Powered by Angular 2, Bootstrap 4, Webpack and many more...</div>
|
||
<div class="right">© 2015–2016 Akveo LLC<br />Documentation licensed under <a href="https://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.</div>
|
||
</footer>
|
||
</div><a href="https://github.com/akveo/ng2-admin" title="Star & Fork on GitHub" class="github-fork-ribbon"></a>
|
||
</body>
|
||
</html> |