src/app/layouts/layout/layout.component.ts
| selector | stbui-layout |
| styleUrls | ./layout.component.scss |
| templateUrl | ./layout.component.html |
Properties |
Methods |
constructor()
|
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|
| _headerComponent |
Type : LayoutHeaderComponent
|
Decorators :
@ContentChild(LayoutHeaderComponent, {static: false})
|
import {
Component,
OnInit,
Input,
ContentChild,
ViewEncapsulation
} from '@angular/core';
@Component({
selector: 'stbui-layout-header',
template: '<ng-content></ng-content>',
encapsulation: ViewEncapsulation.None,
host: {
class: 'stbui-layout-header'
}
})
export class LayoutHeaderComponent implements OnInit {
@Input() color: 'primary' | 'accent' | 'warn' = 'primary';
constructor() {}
ngOnInit() {}
}
@Component({
selector: 'stbui-layout-sidenav',
template: '<ng-content></ng-content>',
host: {
class: 'stbui-layout-sidenav'
}
})
export class LayoutSidenavComponent implements OnInit {
constructor() {}
ngOnInit() {}
}
@Component({
selector: 'stbui-layout',
templateUrl: './layout.component.html',
styleUrls: ['./layout.component.scss']
})
export class LayoutComponent implements OnInit {
@ContentChild(LayoutHeaderComponent, { static: false }) _headerComponent: LayoutHeaderComponent;
constructor() {}
ngOnInit() {}
}
<div class="page-layout">
<div class="layout-header-background" [ngClass]="_headerComponent?.color"></div>
<mat-sidenav-container>
<mat-sidenav class="sidenav" mode="side" align="start" opened="true">
<ng-content select="stbui-layout-sidenav"></ng-content>
</mat-sidenav>
<div class="center">
<div class="header">
<ng-content select="stbui-layout-header"></ng-content>
</div>
<div class="content-card stbui-background-white mat-elevation-z7">
<ng-content></ng-content>
</div>
</div>
</mat-sidenav-container>
</div>
./layout.component.scss
$header__height: 200px;
$content__header__height: 140px;
.page-layout {
position: relative;
height: 100%;
> mat-sidenav-container {
display: flex;
flex: 1;
background: none;
z-index: 2;
width: 100%;
mat-sidenav {
background: none;
}
.sidenav {
display: flex;
flex-direction: column;
flex: 1;
width: 240px;
min-width: 240px;
max-width: 240px;
height: auto;
z-index: 4;
overflow-y: hidden;
}
> .mat-sidenav-content,
> .mat-drawer-content {
display: flex;
flex: 1;
height: auto;
overflow: visible;
}
}
.center {
display: flex;
flex-direction: column;
flex: 1;
position: relative;
z-index: 3;
margin-right: 32px;
.header {
height: $content__header__height;
min-height: $content__header__height;
max-height: $content__header__height;
}
.content-card {
display: flex;
flex-direction: column;
flex: 1;
overflow: hidden;
margin-bottom: 16px;
}
}
}
.stbui-layout-header {
height: $content__header__height;
min-height: $content__header__height;
max-height: $content__header__height;
}
.layout-header-background {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 200px;
}
.layout-header-background {
&.primary {
background: #3f51b5;
}
&.accent {
background: #ff4081;
}
&.warn {
background: #f44336;
}
}