mirror of
https://github.com/Alfresco/alfresco-content-app.git
synced 2025-05-12 17:04:46 +00:00
7d16f13355
* fix navigation docs issues * update documentation (#142) * update documentation changed start command used a tags for links nested inside table and p tags, because Github did not render them correctly * set link to navigation on side-nav.md
164 lines
3.2 KiB
Markdown
164 lines
3.2 KiB
Markdown
# Navigation
|
|
|
|
The Alfresco Content Application provides the following navigation links:
|
|
|
|
- Personal Files
|
|
- File Libraries
|
|
- Shared
|
|
- Recent Files
|
|
- Favorites
|
|
- Trash
|
|
|
|
The side navigation provides support to customize the appearance of the links by editing the `app.config.json`.
|
|
|
|
## Customization
|
|
|
|
Navigation configuration supports array and object like schema. Defining an object helps navigation to render visual delimiters between different groups of links.
|
|
|
|
```json
|
|
{
|
|
"navigation": {
|
|
"main": [
|
|
...
|
|
],
|
|
"secondary": [
|
|
...
|
|
]
|
|
}
|
|
}
|
|
```
|
|
|
|
|
|
|
|
```json
|
|
{
|
|
"navigation": [
|
|
{ ... },
|
|
{ ... },
|
|
...
|
|
]
|
|
}
|
|
```
|
|
|
|
|
|
|
|
### Customize icons and text
|
|
|
|
`icon` - supported value can be anything from [Material Design](https://material.io/icons) icons library. If not defined, the link will render just the label value.
|
|
|
|
`title` - instructs the link to render a native browser tooltip with the given value. It can be a string or a i18n defined reference. If not defined, the link will not show a tooltip.
|
|
|
|
`label` - represents the visual name of the link. It can be a string or a i18n defined reference.
|
|
|
|
<p class="danger">
|
|
Changing ` "route": { "url": "/..." } ` value will affect the navigation since these are mapped to application routing system.
|
|
</p>
|
|
|
|
### Custom text (i18n)
|
|
|
|
To change the `title` and `label` of navigation links edit the values under `BROWSE` entry found at `/src/assets/i18n/en.json`
|
|
|
|
```json
|
|
"APP" : {
|
|
...
|
|
"BROWSE": {
|
|
"PERSONAL": {
|
|
"TITLE": "Personal Files",
|
|
"SIDENAV_LINK": {
|
|
"LABEL": "Personal Files",
|
|
"TOOLTIP": "View your Personal Files"
|
|
}
|
|
},
|
|
...
|
|
}
|
|
}
|
|
```
|
|
|
|
For more information about internationalization see [Internationalization (i18n)](/i18n) section.
|
|
|
|
## User-defined navigation
|
|
|
|
To add custom navigation link for the application, first we need to create a component.
|
|
|
|
`src/app/components/custom-page/custom-page.component.ts`
|
|
|
|
```js
|
|
import { Component } from '@angular/core';
|
|
|
|
@Component({
|
|
template: `
|
|
<h4>{{ title }}</h4>
|
|
`
|
|
})
|
|
export class CustomPage {
|
|
title = 'My Custom Page'
|
|
}
|
|
```
|
|
|
|
Register the component in ```app.module.ts```
|
|
|
|
```javascript
|
|
|
|
...
|
|
import { CustomPage } from './components/custom-page/custom-page.component';
|
|
|
|
@NgModule({
|
|
...
|
|
declarations: [
|
|
...,
|
|
CustomPage
|
|
],
|
|
...
|
|
})
|
|
|
|
```
|
|
|
|
In the `app.config.json` define a link entry which will point to the custom page
|
|
|
|
```json
|
|
{
|
|
...,
|
|
"navigation": [
|
|
"main": [ ... ],
|
|
"secondary": [ ... ],
|
|
"custom": [
|
|
{
|
|
"icon": "work",
|
|
"label": "Link",
|
|
"title": "My custome link",
|
|
"route": {
|
|
"url": "/custom-route"
|
|
}
|
|
}
|
|
]
|
|
]
|
|
}
|
|
|
|
```
|
|
|
|
Map the `/custom-route` in `app.routes.ts` as a child of `LayoutComponent` definition.
|
|
|
|
```js
|
|
|
|
import { CustomPage } from './components/custom-page/custom-page.component.ts';
|
|
|
|
...
|
|
{
|
|
path: '',
|
|
component: LayoutComponent,
|
|
children: [
|
|
...,
|
|
{
|
|
path: 'custom-route',
|
|
component: CustomPage
|
|
}
|
|
]
|
|
}
|
|
...,
|
|
|
|
```
|
|
|
|
|
|
|
|
For more information about the content of a custom page see [Document List Layout](/doc-list) section.
|