feat(abc:page-header): add loading & wide properies (#194)

ng-alain · Oct 3, 2018 · 299e877 · 299e877
1 parent a0caa81
commit 299e877
Show file tree

Hide file tree

Showing 5 changed files with 66 additions and 32 deletions.
diff --git a/packages/abc/page-header/index.md b/packages/abc/page-header/index.md
@@ -20,6 +20,8 @@ config: PageHeaderConfig
 `[homeLink]` | 首页链接 | `string` | `/`
 `[homeI18n]` | 首页链接国际化参数 | `string` | -
 `[autoBreadcrumb]` | 自动生成导航，以当前路由从主菜单中定位 | `boolean` | `true`
+`[loading]` | 是否加载中 | `boolean` | `false`
+`[wide]` | 是否定宽 | `boolean` | `false`
 `[fixed]` | 是否固定模式 | `boolean` | `false`
 `[fixedOffsetTop]` | 固定偏移值 | `number` | `64`
 `[breadcrumb]` | 自定义导航区域 | `TemplateRef<any>` | -

diff --git a/packages/abc/page-header/page-header.component.html b/packages/abc/page-header/page-header.component.html
@@ -3,40 +3,45 @@
 </nz-affix>
 <ng-template #phTpl>
  <div class="page-header">
- <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="_title || _titleTpl" class="page-header__title">
- <ng-container *ngIf="_title; else _titleTpl">{{_title}}</ng-container>
- </h1>
- <div *ngIf="action" class="page-header__action">
- <ng-template [ngTemplateOutlet]="action"></ng-template>
+ <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>
- <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 class="page-header__main">
+ <div class="page-header__row">
+ <h1 *ngIf="_title || _titleTpl" class="page-header__title">
+ <ng-container *ngIf="_title; else _titleTpl">{{_title}}</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>
- </div>
+ <ng-template [ngTemplateOutlet]="tab"></ng-template>
+ </nz-skeleton>
  </div>
- <ng-template [ngTemplateOutlet]="tab"></ng-template>
  </div>
 </ng-template>
diff --git a/packages/abc/page-header/page-header.component.ts b/packages/abc/page-header/page-header.component.ts
@@ -70,6 +70,14 @@ export class PageHeaderComponent
  }
  }
 
+ @Input()
+ @InputBoolean()
+ loading = false;
+
+ @Input()
+ @InputBoolean()
+ wide = false;
+
  @Input()
  home: string;
 

diff --git a/packages/abc/page-header/page-header.spec.ts b/packages/abc/page-header/page-header.spec.ts
@@ -106,6 +106,18 @@ describe('abc: page-header', () => {
  expect(affixComp.updatePosition).toHaveBeenCalled();
  });
  });
+
+ it('#wide', () => {
+ context.wide = true;
+ fixture.detectChanges();
+ isExists('.page-header__wide');
+ });
+
+ it('#loading', () => {
+ context.loading = true;
+ fixture.detectChanges();
+ isExists('.ant-skeleton');
+ });
  });
 
  describe('[generation breadcrumb]', () => {
@@ -353,7 +365,7 @@ describe('abc: page-header', () => {
  template: `
  <page-header #comp [title]="title" [autoTitle]="autoTitle" [syncTitle]="syncTitle"
  [autoBreadcrumb]="autoBreadcrumb" [home]="home" [homeI18n]="homeI18n" [homeLink]="homeLink"
- [fixed]="fixed"
+ [fixed]="fixed" [loading]="loading" [wide]="wide"
  [breadcrumb]="breadcrumb" [logo]="logo" [action]="action" [extra]="extra" [content]="content" [tab]="tab">
  <ng-template #breadcrumb><div class="breadcrumb">面包屑</div></ng-template>
  <ng-template #logo><div class="logo">logo</div></ng-template>
@@ -375,4 +387,6 @@ class TestComponent {
  homeLink: string;
  homeI18n: string;
  fixed: boolean;
+ loading = false;
+ wide = false;
 }
diff --git a/packages/abc/page-header/style/index.less b/packages/abc/page-header/style/index.less
@@ -2,12 +2,17 @@
 
 @page-header-prefix: ~'.page-header';
 @page-header-bg: #fff;
+@page-header-wide: 1200px;
 
 @{page-header-prefix} {
  display: block;
  background-color: @page-header-bg;
  padding: 16px 32px 0 32px;
  border-bottom: @border-width-base @border-style-base @border-color-split;
+ &__wide {
+ max-width: @page-header-wide;
+ margin: auto;
+ }
  .ant-breadcrumb {
  margin-bottom: 16px;
  }