projects/netgrif-components/src/lib/side-menu/side-menu-container/side-menu-container.component.ts
AbstractSideMenuContainerComponent
| selector | nc-side-menu-container |
| styleUrls | ./side-menu-container.component.scss |
| templateUrl | ./side-menu-container.component.html |
Public
constructor(_sideMenuService: SideMenuService)
|
||||||
|
Parameters :
|
import {Component} from '@angular/core';
import {AbstractSideMenuContainerComponent, SideMenuService} from '@netgrif/components-core';
/**
* @deprecated
* */
@Component({
selector: 'nc-side-menu-container',
templateUrl: './side-menu-container.component.html',
styleUrls: ['./side-menu-container.component.scss']
})
export class SideMenuContainerComponent extends AbstractSideMenuContainerComponent {
public constructor(protected _sideMenuService: SideMenuService) {
super(_sideMenuService);
}
}
<mat-sidenav-container class="side-menu-container">
<mat-sidenav #rightSideMenu mode="over" position="end" class="side-menu" ngClass.lt-sm="side-menu-size-mobile"
[ngClass.gt-xs]="portalWrapper.size">
<ng-template [cdkPortalOutlet]="portalWrapper.portal"></ng-template>
</mat-sidenav>
<mat-sidenav-content>
<ng-content></ng-content>
</mat-sidenav-content>
</mat-sidenav-container>
./side-menu-container.component.scss
.side-menu-container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.side-menu {
border-radius: 4px;
}
.side-menu-width-small {
width: 296px;
}
.side-menu-width-medium {
width: 400px;
}
.side-menu-width-large {
width: 496px;
}
.side-menu-width-xl {
width: 600px;
}
.side-menu-size-mobile {
width: 246px;
}