mirror of https://github.com/akveo/blur-admin
docs(general): fix typos in docs
parent
c69b40cbda
commit
1e2a7a446f
|
@ -9,7 +9,7 @@ template: article.jade
|
||||||
Blur admin uses [Angular UI router](https://github.com/angular-ui/ui-router) for navigation.
|
Blur admin uses [Angular UI router](https://github.com/angular-ui/ui-router) for navigation.
|
||||||
That means to create new page you need to basically configure `ui-router` state.
|
That means to create new page you need to basically configure `ui-router` state.
|
||||||
|
|
||||||
We strongly recommend to follow pages structure in our application.
|
We strongly recommend to follow pages structure in your application.
|
||||||
If it doesn't fit your needs please create a GitHub issue and tell us why. We would be glad to discuss.
|
If it doesn't fit your needs please create a GitHub issue and tell us why. We would be glad to discuss.
|
||||||
|
|
||||||
Also we recommend to put pages to separate modules.
|
Also we recommend to put pages to separate modules.
|
||||||
|
@ -19,7 +19,7 @@ This will allow you to easily switch off some pages in the future if needed.
|
||||||
|
|
||||||
0) Let's assume we want to create a blank page with title 'My New Page'
|
0) Let's assume we want to create a blank page with title 'My New Page'
|
||||||
|
|
||||||
1) Create new folder to contain `myNewPage` inside of `src/app/pages`. Let's call it `myNewPage` as well.
|
1) Let's Create a new directory to contain our new page inside of `src/app/pages`. Let's call this directory `myNewPage`.
|
||||||
|
|
||||||
2) Then let's create blank angular module to contain our page called 'myNewPage.module.js' inside of `src/app/pages/myNewPage`:
|
2) Then let's create blank angular module to contain our page called 'myNewPage.module.js' inside of `src/app/pages/myNewPage`:
|
||||||
|
|
||||||
|
@ -31,7 +31,7 @@ This will allow you to easily switch off some pages in the future if needed.
|
||||||
.config(routeConfig);
|
.config(routeConfig);
|
||||||
|
|
||||||
/** @ngInject */
|
/** @ngInject */
|
||||||
function routeConfig($stateProvider) {
|
function routeConfig() {
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -40,7 +40,7 @@ This will allow you to easily switch off some pages in the future if needed.
|
||||||
|
|
||||||
3) Then let's create empty html file called `my-new-page.html` inside of `src/app/pages/myNewPage`.
|
3) Then let's create empty html file called `my-new-page.html` inside of `src/app/pages/myNewPage`.
|
||||||
|
|
||||||
4) Lastly let's create ui router state for this page. To do this we need to modify :
|
4) Lastly let's create ui router state for this page. To do this we need to modify module.js file we created on step 2:
|
||||||
```javascript
|
```javascript
|
||||||
(function () {
|
(function () {
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
|
@ -6,7 +6,7 @@ group: Components
|
||||||
template: article.jade
|
template: article.jade
|
||||||
---
|
---
|
||||||
|
|
||||||
Sidebar is used to provide convenient way of navigation in our application.
|
Sidebar is used to provide convenient way of navigation in the application.
|
||||||
Application support only one sidebar per angular application.
|
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.
|
||||||
|
@ -16,9 +16,8 @@ Sidebar can be created using `baSidebar` directive:
|
||||||
<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.
|
||||||
For now it support only javascript configuration. And can be configured manually or via `ui-router` states.
|
This methods can be used either together or one at a time.
|
||||||
They can be used either combined or one at a time.
|
|
||||||
|
|
||||||
|
|
||||||
## Manual configuration
|
## Manual configuration
|
||||||
|
@ -45,7 +44,7 @@ The provider has `addStaticItem` method, which receives menuItem object as an ar
|
||||||
<tr>
|
<tr>
|
||||||
<td>icon</td>
|
<td>icon</td>
|
||||||
<td>String</td>
|
<td>String</td>
|
||||||
<td>Icon (it's class name) to be displayed near title</td>
|
<td>Icon (it's a class name) to be displayed near title</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
|
||||||
<tr>
|
<tr>
|
||||||
|
@ -75,15 +74,23 @@ The provider has `addStaticItem` method, which receives menuItem object as an ar
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
|
Sample manual configuration:
|
||||||
|
```javascript
|
||||||
|
baSidebarServiceProvider.addStaticItem({
|
||||||
|
title: 'Menu Level 1',
|
||||||
|
icon: 'ion-ios-more'
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
## Route configuration
|
## Route configuration
|
||||||
|
|
||||||
By default sidebar iterates through all **ui-router** states you defined in your application and looks for `sidebarMeta` property in them.
|
By default sidebar iterates through all **ui-router** states you defined in your application and searches for `sidebarMeta` object in them.
|
||||||
For each state with this property found sidebar element is created.
|
For each state, which has this property, sidebar element is created.
|
||||||
|
|
||||||
States are being grouped hierarchically.
|
States are being grouped hierarchically.
|
||||||
That means if there's parent abstract state for some state and they both have `sidebarMeta` property, it will be displayed as a sub item of that abstract state menu item.
|
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 be included in sidebar:
|
Name of the item is taken from `state`'s `title` property. Sample state configuration, which will add an item to sidebar:
|
||||||
```javascript
|
```javascript
|
||||||
$stateProvider
|
$stateProvider
|
||||||
.state('dashboard', {
|
.state('dashboard', {
|
||||||
|
@ -112,7 +119,7 @@ $stateProvider
|
||||||
<tr>
|
<tr>
|
||||||
<td>icon</td>
|
<td>icon</td>
|
||||||
<td>String</td>
|
<td>String</td>
|
||||||
<td>Icon (it's class name) to be displayed near title</td>
|
<td>Icon (it's a class name) to be displayed near title</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
|
||||||
<tr>
|
<tr>
|
||||||
|
|
Loading…
Reference in New Issue