Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-12-18 08:20:13 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

docs(sidebar): how to configure a sidebar

Browse source
This commit is contained in:
nixa 2016-05-24 13:29:46 +03:00
parent d7ec3fa1dd
commit 570b68b531
1 changed files with 33 additions and 107 deletions
Download patch file Download diff file Expand all files Collapse all files

140
docs/contents/articles/051-sidebar/index.md
View file

@ -11,122 +11,48 @@ Application support only one sidebar per angular application.
That means sidebar is basically a singletone object. That means sidebar is basically a singletone object.
Currently sidebar supports level 1 and 2 sub menus. Currently sidebar supports level 1 and 2 sub menus.
Sidebar can be created using `baSidebar` directive: Sidebar can be added to the page using `BaSidebar` component:
```html ```html
<ba-sidebar></ba-sidebar> <ba-sidebar></ba-sidebar>
``` ```
For now it support only javascript configuration. Though it can be configured manually or via `ui-router` states. At the moment sidebar menu items configuration and Angular 2 Router should be configured independently. We probably will come up with a better solution once new Angular Router is released and stable.
This methods can be used either together or one at a time.
## Manual configuration ## Menu Configuration
For manual configuration you need to use `baSidebarServiceProvider` provider in angular [configuration block](https://docs.angularjs.org/guide/module#configuration-blocks). All menu items are located inside `src/app/app.menu.ts` file. The file contain a list of Menu Item objects with the following fields:
The provider has `addStaticItem` method, which receives menuItem object as an argument, which can have following properties:
<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 a class name) to be displayed near title</td>
</tr>
<tr>
<td>stateRef</td>
<td>String</td>
<td>`ui-router` 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>
Sample manual configuration:
```javascript ```javascript
baSidebarServiceProvider.addStaticItem({ {
title: 'Menu Level 1', title: 'Dashboard', // menu item title
icon: 'ion-ios-more' component: 'Dashboard', // component where the menu should lead, has a priority over url property
}); url: 'http://google.com' // manual url address (used only when component is not specified)
icon: 'ion-android-home', // icon class
target: '_blank', // link target attribute (used only when url is specified)
selected: false, // is item selected
expanded: false, // is item expanded (used only when subItems list specified)
order: 0 // order in a list
}
```
You also can define a list of sub-menu items like this:
```javascript
{
title: 'Charts',
component: 'Charts',
icon: 'ion-stats-bars',
selected: false,
expanded: false,
order: 200,
subMenu: [ // list of sub-menu items
{
title: 'Chartist.Js', // sub-item title
component: 'ChartistJs' // sum-item component
},
]
}
``` ```
## Route configuration ## Routes configuration
By default sidebar iterates through all **ui-router** states you defined in your application and searches for `sidebarMeta` object in them. Routes configuration is specified in the Page Components according to Angular 2 Router specification. More information you can find [here](https://angular.io/docs/ts/latest/guide/router.html).
For each state, which has this property, sidebar element is created.
States are being grouped hierarchically.
That means if there's a parent abstract state for some state and they both have `sidebarMeta` property, it will be displayed as a sub item of that abstract state's menu item.
Name of the item is taken from `state`'s `title` property. Sample state configuration, which will add an item to sidebar:
```javascript
$stateProvider
.state('dashboard', {
url: '/dashboard',
templateUrl: 'app/pages/dashboard/dashboard.html',
title: 'Dashboard',
sidebarMeta: {
icon: 'ion-android-home',
order: 0,
},
});
```
`sidebarMeta` object can have following properties:
<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 a 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>