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

Popovics András 0aba5bb1b5 [ADF-2559] Sidenav layout (#3119 )

* First step of extraction

* Add sidenav-layout to demo-shell

* Fix some sidenav-layout styles

* Fix tests

* Add documentation

* Fix typescript transpiler's stomache

* Modify component's directive's interface

* Enrich documentation

* Another documentation enrichment

* Fix tests and mobile expanded issue

2018-03-28 13:49:52 +01:00

2.7 KiB

Raw Blame History

Added, Status

Added	Status
v2.3.0	Active

Sidenav layout component

A generalised component to help displayig the "ADF style" application frame. The layout consists of 3 regions:

header
navigation
content

The navigation (depending on the screensize) either uses the Angular Material Sidenav (on small breakpoint), or the ADF style Sidenav (on bigger breakpoint).

For Angular Material Sidenav see examples on the Angular Material project's site.
The ADF style Sidenav has 2 states: expanded and compact. Regardless of the state, it is always displayed on the screen, either in small width (compact) or in bigger width (expanded).

The contents of the 3 regions can be injected through Angular's template transclusion. For more details see the usage example of the components.

On desktop (above stepOver):

On mobile (below stepOver):

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>

Properties

Name	Type	Default	Description
sidenavMin	number	-	(required) the compact width in pixels
sidenavMax	number	-	(required) the expanded width in pixels
stepOver	number	-	(required) The breakpoint in pixels, where to step over to mobile/desktop
hideSidenav	boolean	false	Hide the navigation or not
expandedSidenav	boolean	true	The initial (expanded/compact) state of the navigation

Template context

Each template is given the context containing the following methods:

toggleMenu(): void

Trigger 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.

2.7 KiB Raw Blame History