File
Implements
Metadata
| encapsulation |
ViewEncapsulation.None |
| host |
{
} |
| selector |
stbui-base-layout, stbui-base-layout-container |
| styleUrls |
./base-layout.component.scss |
| templateUrl |
./base-layout.component.html |
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
import {
Component,
OnInit,
Input,
ViewEncapsulation,
ContentChild
} from '@angular/core';
@Component({
selector: 'stbui-base-layout-header',
template: '<ng-content></ng-content>',
encapsulation: ViewEncapsulation.None,
host: {
class: 'base-layout-header'
}
})
export class BaseLayoutHeaderComponent implements OnInit {
@Input() color: 'primary' | 'accent' | 'warn' = 'primary';
constructor() {}
ngOnInit() {}
}
@Component({
selector: 'stbui-base-layout-toolbar',
template: '<ng-content></ng-content>',
encapsulation: ViewEncapsulation.None,
host: {
class: 'base-layout-toolbar'
}
})
export class BaseLayoutToolbarComponent implements OnInit {
constructor() {}
ngOnInit() {}
}
@Component({
selector: 'stbui-base-layout-content',
template: '<ng-content></ng-content>',
encapsulation: ViewEncapsulation.None,
host: {
class: 'base-layout-content'
}
})
export class BaseLayoutContentComponent implements OnInit {
constructor() {}
ngOnInit() {}
}
@Component({
selector: 'stbui-base-layout, stbui-base-layout-container',
templateUrl: './base-layout.component.html',
styleUrls: ['./base-layout.component.scss'],
encapsulation: ViewEncapsulation.None,
host: {
class: 'layout-container',
'[class.layout-strategy]': 'scrollStrategy === "strategy"'
}
})
export class BaseLayoutComponent implements OnInit {
@Input() scrollStrategy;
@ContentChild(BaseLayoutHeaderComponent, { static: false }) _header: BaseLayoutHeaderComponent;
constructor() {}
ngOnInit() {}
}
<div class="page-layout">
<div class="base-layout-header-background" [ngClass]="_header?.color"></div>
<div class="base-layout-wrapper">
<ng-content select="stbui-base-layout-header"></ng-content>
<div class="base-layout-card">
<ng-content select="stbui-base-layout-toolbar"></ng-content>
<div class="base-layout-content">
<ng-content></ng-content>
</div>
</div>
</div>
</div>
.layout-container {
display: flex;
flex: 1;
width: 100%;
}
.layout-strategy {
height: 100%;
}
.page-layout {
display: flex;
flex-direction: column;
flex: 1 0 auto;
width: 100%;
min-width: 100%;
position: relative;
}
.base-layout {
&-toolbar {
display: flex;
flex-direction: row;
align-items: center;
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
height: 64px;
min-height: 64px;
max-height: 64px;
padding: 0 24px;
color: #616161;
}
&-header {
height: 136px;
min-height: 136px;
max-height: 136px;
}
&-header-background {
position: absolute;
z-index: 1;
top: 0;
right: 0;
left: 0;
height: 200px;
background-size: cover;
}
&-wrapper {
display: flex;
flex-direction: column;
flex: 1;
position: relative;
z-index: 2;
padding: 0 32px;
width: 100%;
min-width: 100%;
max-width: 100%;
max-height: 100%;
box-sizing: border-box;
}
&-card {
display: flex;
flex-direction: column;
flex: 1;
overflow: hidden;
background: #fff;
box-shadow: 0 4px 5px -2px rgba(0, 0, 0, 0.2),
0 7px 10px 1px rgba(0, 0, 0, 0.14), 0 2px 16px 1px rgba(0, 0, 0, 0.12);
}
&-content {
display: flex;
flex: 1;
padding: 24px;
overflow: auto;
}
&-sidenav {
display: flex;
flex-direction: column;
flex: 1;
width: 240px;
min-width: 240px;
max-width: 240px;
height: auto;
z-index: 4;
overflow-y: hidden;
box-shadow: 0px 4px 5px -2px rgba(0, 0, 0, 0.2),
0px 7px 10px 1px rgba(0, 0, 0, 0.14), 0px 2px 16px 1px rgba(0, 0, 0, 0.12);
padding: 24px;
}
}
.base-layout-header-background {
&.primary {
background: #3f51b5;
}
&.accent {
background: #ff4081;
}
&.warn {
background: #f44336;
}
}
Legend
Html element with directive