angular-material-app documentation
  1. Components
  2. LayoutComponent

File

src/app/layouts/layout/layout.component.ts

Implements

OnInit

Metadata

selector stbui-layout
styleUrls ./layout.component.scss
templateUrl ./layout.component.html

Index

Properties
Methods

Constructor

constructor()
Defined in src/app/layouts/layout/layout.component.ts:50

Methods

ngOnInit
ngOnInit()
Defined in src/app/layouts/layout/layout.component.ts:53
Returns : void

Properties

_headerComponent
Type : LayoutHeaderComponent
Decorators :
@ContentChild(LayoutHeaderComponent, {static: false})
Defined in src/app/layouts/layout/layout.component.ts:50
 
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() {}
}
Copy
<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>
Copy

./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;
  }
}
Copy
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""