mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-05-19 17:14:57 +00:00
440c666583
* [ADF-2626] added preserved state functionality for sidenav component * [ADF-2626] changed logic for preserving the sidenav component state * [ADF-2626] added missing curly brace } * [ADF-2626] small changes on logic based on pr comments * [ADF-2843] added tooltip for create folder and edit folder icons from Content Services * Revert "[ADF-2843] added tooltip for create folder and edit folder icons from Content Services" This reverts commit d5a7abb65b5bbfd024b44aa7e331e688aa13eb60. * [ADF-2626] changed casting * [ADF-2626] updated documentation with event * [ADF-2626] removed app-config pipe because it was not being used
134 lines
4.8 KiB
Markdown
134 lines
4.8 KiB
Markdown
---
|
|
Added: v2.3.0
|
|
Status: Active
|
|
Last reviewed: 2018-04-11
|
|
---
|
|
|
|
# Sidenav Layout component
|
|
|
|
Displays the standard three-region ADF application layout.
|
|
|
|
|
|
|
|
## Basic Usage
|
|
|
|
```html
|
|
<adf-sidenav-layout
|
|
[sidenavMin]="70"
|
|
[sidenavMax]="220"
|
|
[stepOver]="600"
|
|
[hideSidenav]="false"
|
|
[expandedSidenav]="true"
|
|
(expanded)="setState($event)">
|
|
|
|
<adf-sidenav-layout-header>
|
|
<ng-template let-toggleMenu="toggleMenu">
|
|
<div class="app-header">
|
|
<button (click)="toggleMenu()">toggle menu</button>
|
|
</div>
|
|
</ng-template>
|
|
</adf-sidenav-layout-header>
|
|
|
|
<adf-sidenav-layout-navigation>
|
|
<ng-template let-isMenuMinimized="isMenuMinimized">
|
|
<div *ngIf="isMenuMinimized()" class="app-compact-navigation"></div>
|
|
<div *ngIf="!isMenuMinimized()" class="app-expanded-navigation"></div>
|
|
</ng-template>
|
|
</adf-sidenav-layout-navigation>
|
|
|
|
<adf-sidenav-layout-content>
|
|
<ng-template>
|
|
<router-outlet></router-outlet>
|
|
</ng-template>
|
|
</adf-sidenav-layout-content>
|
|
|
|
</adf-sidenav-layout>
|
|
```
|
|
|
|
## Class members
|
|
|
|
### Properties
|
|
|
|
| Name | Type | Default | Description |
|
|
| --- | --- | --- | --- |
|
|
| sidenavMin | `number` | | (**required**) Width in pixels when compacted |
|
|
| sidenavMax | `number` | | (**required**) Width in pixels when expanded |
|
|
| stepOver | `number` | | (**required**) "Breakpoint" size (ie, number of pixels for selecting between mobile and desktop layouts) |
|
|
| hideSidenav | `boolean` | false | Toggles showing/hiding the navigation region |
|
|
| expandedSidenav | `boolean` | true | Should the navigation region be expanded initially? |
|
|
|
|
## Details
|
|
|
|
This component displays the familiar ADF layout consisting of three regions: header, navigation
|
|
and content.
|
|
|
|
The layout will select between a small screen (ie, mobile) configuration and a large screen
|
|
configuration according to the screen size in pixels (the `stepOver` property sets the
|
|
number of pixels at which the switch will occur).
|
|
|
|
The small screen layout uses the Angular Material [Sidenav component](https://material.angularjs.org/latest/api/directive/mdSidenav) which is
|
|
described in detail on their website.
|
|
|
|
The ADF-style (ie, large screen) Sidenav has two states: **expanded** and **compact**.
|
|
The navigation is always displayed regardless of the state but it will have a reduced width
|
|
when compacted. Set the widths for the expanded and compact states with the `sidenavMin` and
|
|
`sidenavMax` properties.
|
|
|
|
The contents of the 3 regions can be injected through Angular's template transclusion as shown
|
|
in the usage example above.
|
|
|
|
Desktop layout (screen width greater than the `stepOver` value):
|
|
|
|
|
|
Mobile layout (screen width less than the `stepOver` value):
|
|
|
|
|
|
### Public attributes
|
|
|
|
| Name | Type | Default | Description |
|
|
| --- | --- | --- | --- |
|
|
| menuOpenState$ | Observable<boolean> | true | Another way to listen to menu open/closed state |
|
|
|
|
### Events
|
|
|
|
| Name | Type | Description |
|
|
| expanded | `EventEmitter<boolean>` | Emmitted when the menu toggle and the collapsed/expanded state of the sideNav changes
|
|
|
|
### Template context
|
|
|
|
Each template is given a context containing the following methods:
|
|
|
|
- `toggleMenu(): void`
|
|
Triggers menu toggling.
|
|
|
|
- `isMenuMinimized(): boolean`
|
|
The expanded/compact (minimized) state of the navigation. This one only makes sense in case of desktop size, when the screen size is above the value of stepOver.
|
|
|
|
### menuOpenState$
|
|
|
|
Beside the template context's **isMenuMinimized** variable, another way to listen to the component's menu's open/closed state is the menuOpenState$ observable, which is driven by a BehaviorSubject at the background. The value emitted on this observable is the opposite of the isMenuMinimized template variable.
|
|
|
|
Every time the menu state is changed, the following values are emitted:
|
|
|
|
- true, if the menu got into opened state
|
|
- false, if the menu git into closed state
|
|
|
|
### Preserving the menu state
|
|
|
|
It is possible to preserve the state of the menu between sessions. This require to first set a property in the appConfig.json file.
|
|
|
|
```
|
|
"sideNav" : {
|
|
"preserveState" : true
|
|
}
|
|
```
|
|
If this property is set, the collapsed/expanded state will be stored in the local storage, and it will be restored with page reload or the next time the user visits the app.
|
|
Beside this, it is also possible to set the default value in the appConfig.json file:
|
|
|
|
```
|
|
"sideNav" : {
|
|
"expandedSidenav" : true
|
|
}
|
|
```
|
|
|
|
By default the collapsed/exapnded state should be read from the application configuration file, but only if there is no value for the collapsed/expanded state in the local storage. |