ohayolibs/packages/components/page-header/page-header.component.html

Ohayo is a set of essential modules for ohayojp.

<nz-affix #affix *ngIf="isBrowser && fixed; else phTpl" [nzOffsetTop]="fixedOffsetTop">
  <ng-template [ngTemplateOutlet]="phTpl"></ng-template>
</nz-affix>
<ng-template #phTpl>
  <div class="page-header">
    <div [ngClass]="{ 'page-header__wide': wide }">
      <nz-skeleton [nzLoading]="loading" [nzTitle]="false" [nzActive]="true" [nzParagraph]="{ rows: 3 }" [nzAvatar]="{ size: 'large', shape: 'circle' }">
        <ng-container *ngIf="!breadcrumb; else breadcrumb">
          <nz-breadcrumb *ngIf="paths && paths.length > 0">
            <nz-breadcrumb-item *ngFor="let i of paths">
              <ng-container *ngIf="i.link">
                <a [routerLink]="i.link">{{ i.title }}</a>
              </ng-container>
              <ng-container *ngIf="!i.link">{{ i.title }}</ng-container>
            </nz-breadcrumb-item>
          </nz-breadcrumb>
        </ng-container>
        <div class="page-header__detail">
          <div *ngIf="logo" class="page-header__logo">
            <ng-template [ngTemplateOutlet]="logo"></ng-template>
          </div>
          <div class="page-header__main">
            <div class="page-header__row">
              <h1 *ngIf="_titleVal || _titleTpl" class="page-header__title">
                <ng-container *ngIf="_titleVal; else _titleTpl">{{ _titleVal }}</ng-container>
              </h1>
              <div *ngIf="action" class="page-header__action">
                <ng-template [ngTemplateOutlet]="action"></ng-template>
              </div>
            </div>
            <div class="page-header__row">
              <div class="page-header__desc" (cdkObserveContent)="checkContent()" #conTpl>
                <ng-content></ng-content>
                <ng-template [ngTemplateOutlet]="content"></ng-template>
              </div>
              <div *ngIf="extra" class="page-header__extra">
                <ng-template [ngTemplateOutlet]="extra"></ng-template>
              </div>
            </div>
          </div>
        </div>
        <ng-template [ngTemplateOutlet]="tab"></ng-template>
      </nz-skeleton>
    </div>
  </div>
</ng-template>