161 lines
6.3 KiB
HTML
161 lines
6.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>BlurAdmin documentation - Sidebar</title>
|
||
<link rel="alternate" href="http://localhost:8080/feed.xml" type="application/rss+xml" title="Ramblings of an immor(t)al demigod">
|
||
<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="/blur-admin/css/main.css">
|
||
<link rel="shortcut icon" href="/blur-admin/images/favicon.png">
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<div class="nav-main">
|
||
<div class="wrap"><a href="/blur-admin/" class="nav-home"><img src="/blur-admin/images/blur-admin-logo.png" width="36" height="36" class="nav-logo"> <span class="blur-label">Blur</span>Admin</a>
|
||
<ul class="nav-site nav-site-internal">
|
||
<li><a href="/blur-admin/">Home</a></li>
|
||
<li><a href="/blur-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:help@akveo.com">help@akveo.com</a></span>
|
||
</div>
|
||
</div>
|
||
<section class="content wrap documentationContent">
|
||
<div class="nav-docs">
|
||
<div class="nav-docs section">
|
||
<h3>Quick Start</h3>
|
||
<ul>
|
||
<li><a href="/blur-admin/articles/001-getting-started/">Getting Started</a></li>
|
||
<li><a href="/blur-admin/articles/002-installation-guidelines/">Installation Guidelines</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="nav-docs section">
|
||
<h3>Customization</h3>
|
||
<ul>
|
||
<li><a href="/blur-admin/articles/011-changing-color-scheme/">Changing Color Scheme</a></li>
|
||
<li><a href="/blur-admin/articles/012-project-structure/">Project Structure</a></li>
|
||
<li><a href="/blur-admin/articles/013-create-new-page/">Create New Page</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="nav-docs section">
|
||
<h3>Components</h3>
|
||
<ul>
|
||
<li><a href="/blur-admin/articles/051-sidebar/" class="active">Sidebar</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="inner-content">
|
||
<h1>Sidebar</h1>
|
||
<div class="subHeader"></div><p>Sidebar is used to provide convenient way of navigation in our application.
|
||
Application support only one sidebar per angular application.
|
||
That means sidebar is basically a singletone object.
|
||
Currently sidebar supports level 1 and 2 sub menus.</p>
|
||
<p>Sidebar can be created using <code>baSidebar</code> directive:</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>For now it support only javascript configuration. And can be configured manually or via <code>ui-router</code> states.
|
||
They can be used either combined or one at a time.</p>
|
||
<h2 id="manual-configuration">Manual configuration</h2>
|
||
<p>For manual configuration you need to use <code>baSidebarServiceProvider</code> provider in angular <a href="https://docs.angularjs.org/guide/module#configuration-blocks">configuration block</a>.
|
||
The provider has <code>addStaticItem</code> method, which receives menuItem object as an argument, which can have following properties:</p>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<td>property</td>
|
||
<td>type</td>
|
||
<td>meaning</td>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
|
||
<tr>
|
||
<td>title</td>
|
||
<td>String</td>
|
||
<td>Name of the menu item</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td>icon</td>
|
||
<td>String</td>
|
||
<td>Icon (it’s class name) to be displayed near title</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td>stateRef</td>
|
||
<td>String</td>
|
||
<td><code>ui-router</code> state associated with this menu item</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td>fixedHref</td>
|
||
<td>String</td>
|
||
<td>Url associated with this menu item</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td>blank</td>
|
||
<td>String</td>
|
||
<td>Specifies if following Url should be opened in new browser tab</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td>subMenu</td>
|
||
<td>Array of menu items</td>
|
||
<td>List of menu items to be displayed as next level submenu</td>
|
||
</tr>
|
||
|
||
</tbody>
|
||
</table>
|
||
|
||
<h2 id="route-configuration">Route configuration</h2>
|
||
<p>By default sidebar iterates through all <strong>ui-router</strong> states you defined in your application and looks for <code>sidebarMeta</code> property in them.
|
||
For each state with this property found sidebar element is created. </p>
|
||
<p>States are being grouped hierarchically.
|
||
That means if there’s parent abstract state for some state and they both have <code>sidebarMeta</code> property, it will be displayed as a sub item of that abstract state menu item. </p>
|
||
<p>Name of the item is taken from <code>state</code>‘s <code>title</code> property. Sample state configuration, which will be included in sidebar:</p>
|
||
<pre><code class="lang-javascript">$stateProvider
|
||
.state(<span class="string">'dashboard'</span>, {
|
||
url: <span class="string">'/dashboard'</span>,
|
||
templateUrl: <span class="string">'app/pages/dashboard/dashboard.html'</span>,
|
||
title: <span class="string">'Dashboard'</span>,
|
||
sidebarMeta: {
|
||
icon: <span class="string">'ion-android-home'</span>,
|
||
order: <span class="number">0</span>,
|
||
},
|
||
});
|
||
</code></pre>
|
||
<p><code>sidebarMeta</code> object can have following properties:</p>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<td>property</td>
|
||
<td>type</td>
|
||
<td>meaning</td>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
|
||
<tr>
|
||
<td>icon</td>
|
||
<td>String</td>
|
||
<td>Icon (it’s class name) to be displayed near title</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td>order</td>
|
||
<td>Number</td>
|
||
<td>Element’s order in current hierarchy</td>
|
||
</tr>
|
||
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</section>
|
||
<footer class="wrap">
|
||
<div class="left">Powered by Angular, Bootsrap, Gulp and 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>
|
||
</body>
|
||
</html> |