2016-05-25 13:42:47 +03:00
<!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" >
2016-07-12 16:34:59 +03:00
< title > ng2-admin documentation - Sidebar< / title >
2016-05-25 13:42:47 +03:00
< 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" >
< h3 > Quick Start< / h3 >
< 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" >
< h3 > Customization< / h3 >
< 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" >
< h3 > Components< / h3 >
< 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 > Sidebar is used to provide convenient way of navigation in the application.
2016-05-25 14:35:57 +03:00
Application supports only one sidebar per angular application.
2016-07-12 16:34:59 +03:00
That means sidebar is basically a singletone object.< / p >
2016-05-25 13:42:47 +03:00
< p > Sidebar can be added to the page using < 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 >
2016-07-12 16:34:59 +03:00
< p > The sidebar contains a < code > < ba-menu> < /ba-menu> < / code > component which defines and renders application menu based on routes provided. Generally < code > ba-menu< / code > component can be used separately from < code > ba-sidebar< / code > .
All menu items information defined inside the < code > data< / code > properly of a route.< / p >
2016-05-25 13:42:47 +03:00
< h2 id = "menu-configuration" > Menu Configuration< / h2 >
2016-07-12 16:34:59 +03:00
< p > All menu items are located inside < 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 >
2016-05-25 13:42:47 +03:00
< pre > < code class = "lang-javascript" > {
2016-07-12 16:34:59 +03:00
< span class = "comment" > // first, router configuration< / span >
path: < span class = "string" > 'dashboard'< / span > ,
component: Dashboard,
data: {
< span class = "comment" > // here additionaly we difine how the menu item should look like< / 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" > // and item order in the menu list< / span >
}
}
2016-05-25 13:42:47 +03:00
}
< / code > < / pre >
< p > You also can define a list of sub-menu items like this:< / p >
< pre > < code class = "lang-javascript" > {
2016-07-12 16:34:59 +03:00
< 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: [
2016-05-25 13:42:47 +03:00
{
2016-07-12 16:34:59 +03:00
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 > ,
}
}
}
2016-05-25 13:42:47 +03:00
]
}
< / code > < / pre >
2016-07-12 16:34:59 +03:00
< 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 >
2016-05-25 13:42:47 +03:00
< / div >
< / section >
< footer class = "wrap" >
< div class = "left" > Powered by Angular 2, Bootstrap 4, Webpack and many more...< / div >
< div class = "right" > © 2015– < 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 >
