1.9 KiB
| title | author | sort | group | template |
|---|---|---|---|---|
| Sidebar | vl | 900 | Components | article.jade |
Sidebar is used to provide convenient way of navigation in the application. Application supports only one sidebar per angular application. That means sidebar is basically a singletone object. Currently sidebar supports level 1 and 2 sub menus.
Sidebar can be added to the page using BaSidebar component:
<ba-sidebar></ba-sidebar>
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.
Menu Configuration
All menu items are located inside src/app/app.menu.ts file. The file contains a list of Menu Item objects with the following fields:
{
title: 'Dashboard', // menu item title
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:
{
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
},
]
}
Routes configuration
Routes configuration is specified in the Page Components according to Angular 2 Router specification. More information you can find here.