mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-05-19 17:14:57 +00:00

Andy Stark 38de016893 [ADF-2670] Reviewed sidenav docs and updated index files (#3172 )

* [ADF-2670] Updated indexes and reviewed sidenav docs

* [ADF-2670] Rebuilt index files after doc file change

2018-04-11 14:27:42 +01:00

3.1 KiB

Raw Blame History

Added, Status, Last reviewed

Added	Status	Last reviewed
v2.3.0	Active	2018-04-11

Sidenav Layout component

Displays the standard three-region ADF application layout.

Basic Usage

<adf-sidenav-layout
    [sidenavMin]="70"
    [sidenavMax]="220"
    [stepOver]="600"
    [hideSidenav]="false"
    [expandedSidenav]="true">

    <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 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):

Template context

Each template is given a context containing the following methods:

toggleMenu(): void Triggers menu toggling.
isMenuMinimized(): boolean Is the menu in minimized/compacted state? Only works for large screen layouts.

3.1 KiB Raw Blame History