blur-admin/articles/051-sidebar/index.html

184 lines
8.2 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<!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&amp;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"><!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-K8MXX5F');</script>
<!-- End Google Tag Manager -->
</head>
<body>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-K8MXX5F"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<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">&nbsp;<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:contact@akveo.com">contact@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/014-switch-to-blur-theme/">Enabling blur theme</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 class="nav-docs section">
<h3>Other</h3>
<ul>
<li><a href="/blur-admin/articles/091-downloads/">Downloads</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 the 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<span class="widont">&nbsp;</span>menus.</p>
<p>Sidebar can be created using <code>baSidebar</code> directive:</p>
<pre><code class="lang-html"><span class="tag">&lt;<span class="title">ba-sidebar</span>&gt;</span><span class="tag">&lt;/<span class="title">ba-sidebar</span>&gt;</span>
</code></pre>
<p>For now it support only javascript configuration. Though it can be configured manually or via <code>ui-router</code> states.
This methods can be used either together or one at a<span class="widont">&nbsp;</span>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<span class="widont">&nbsp;</span>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 (its a 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>
<p>Sample manual configuration:</p>
<pre><code class="lang-javascript"> baSidebarServiceProvider.addStaticItem({
title: <span class="string">'Menu Level 1'</span>,
icon: <span class="string">'ion-ios-more'</span>
});
</code></pre>
<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 searches for <code>sidebarMeta</code> object in them.
For each state, which has this property, sidebar element is<span class="widont">&nbsp;</span>created. </p>
<p>States are being grouped hierarchically.
That means if theres a 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 states menu<span class="widont">&nbsp;</span>item. </p>
<p>Name of the item is taken from <code>state</code>s <code>title</code> property. Sample state configuration, which will add an item to<span class="widont">&nbsp;</span>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<span class="widont">&nbsp;</span>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 (its a class name) to be displayed near title</td>
</tr>
<tr>
<td>order</td>
<td>Number</td>
<td>Elements order in current hierarchy</td>
</tr>
</tbody>
</table>
</div>
</section>
<footer class="wrap">
<div class="left">Powered by Angular, Bootstrap, Gulp and more...</div>
<div class="right">© 20152016 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/blur-admin"><img style="position: fixed; top: 0; right: 0; border: 0; z-index: 1000;" src="https://camo.githubusercontent.com/365986a132ccd6a44c23a9169022c0b5c890c387/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png"></a>
</body>
</html>