feat(module:page-header): add nzGhost property (#4306)

* feat(module:page-header): add `nzGhost` property

* chore: add config name cont

close #4303

components/core/config/config.ts

@@ -36,6 +36,7 @@ export interface NzConfig {
   message?: MessageConfig;
   modal?: ModalConfig;
   notification?: NotificationConfig;
+  pageHeader?: PageHeaderConfig;
   progress?: ProgressConfig;
   rate?: RateConfig;
   spin?: SpinConfig;
@@ -174,6 +175,10 @@ export interface NotificationConfig extends MessageConfig {
   nzPlacement?: 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | string;
 }
 
+export interface PageHeaderConfig {
+  nzGhost: boolean;
+}
+
 export interface ProgressConfig {
   nzGapDegree?: number;
   nzGapPosition?: 'top' | 'right' | 'bottom' | 'left';

components/page-header/demo/actions.md

@@ -1,5 +1,5 @@
 ---
-order: 4
+order: 5
 title:
   zh-CN: 多种形态的 PageHeader
   en-US: Various forms of PageHeader

components/page-header/demo/breadcrumb.md

@@ -1,5 +1,5 @@
 ---
-order: 2
+order: 3
 title:
   zh-CN: 带面包屑页头
   en-US: Use with breadcrumbs

components/page-header/demo/content.md

@@ -1,5 +1,5 @@
 ---
-order: 3
+order: 4
 title:
   zh-CN: 组合示例
   en-US:  Complete example

components/page-header/demo/ghost.md

@@ -0,0 +1,14 @@
+---
+order: 2
+title:
+  zh-CN: 白底模式
+  en-US: white background mode
+---
+
+## zh-CN
+
+默认 PageHeader 是透明底色的。在某些情况下，PageHeader 需要自己的背景颜色。
+
+## en-US
+
+The default PageHeader is a transparent background. In some cases, PageHeader needs its own background color.

components/page-header/demo/ghost.ts

@@ -0,0 +1,38 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-page-header-ghost',
+  template: `
+    <div class="wrap">
+      <nz-page-header nzBackIcon [nzGhost]="false">
+        <nz-page-header-title>Title</nz-page-header-title>
+        <nz-page-header-subtitle>This is a subtitle</nz-page-header-subtitle>
+        <nz-page-header-extra>
+          <button nz-button>Operation</button>
+          <button nz-button>Operation</button>
+          <button nz-button nzType="primary">Primary</button>
+        </nz-page-header-extra>
+        <nz-page-header-content>
+          <nz-descriptions [nzColumn]="3">
+            <nz-descriptions-item nzTitle="Created" [nzSpan]="1">Lili Qu</nz-descriptions-item>
+            <nz-descriptions-item nzTitle="Association" [nzSpan]="1"><a>421421</a></nz-descriptions-item>
+            <nz-descriptions-item nzTitle="Creation Time" [nzSpan]="1">2017-01-10</nz-descriptions-item>
+            <nz-descriptions-item nzTitle="Effective Time" [nzSpan]="1">2017-10-10</nz-descriptions-item>
+            <nz-descriptions-item nzTitle="Remarks" [nzSpan]="2">
+              Gonghu Road, Xihu District, Hangzhou, Zhejiang, China
+            </nz-descriptions-item>
+          </nz-descriptions>
+        </nz-page-header-content>
+      </nz-page-header>
+    </div>
+  `,
+  styles: [
+    `
+      .wrap {
+        background-color: #f5f5f5;
+        padding: 24px;
+      }
+    `
+  ]
+})
+export class NzDemoPageHeaderGhostComponent {}

components/page-header/demo/responsive.md

@@ -1,5 +1,5 @@
 ---
-order: 5
+order: 6
 title:
   zh-CN: 响应式
   en-US: responsive

components/page-header/doc/index.en-US.md

@@ -26,12 +26,13 @@ import { NzPageHeaderModule } from 'ng-zorro-antd/page-header';
 ```
 
 ### nz-page-header
-| Param | Description | Type | Default value |
-| ----- | ----------- | ---- | ------------- |
-| `[nzTitle]` | Title string | `string \| TemplateRef<void>` | - |
-| `[nzSubtitle]` | SubTitle string | `string \| TemplateRef<void>` | - |
-| `[nzBackIcon]` | Custom back icon | `string \| TemplateRef<void>` | - |
-| `(nzBack)` | Back icon click event | `EventEmitter<void>` | Call [Location[back]](https://angular.io/api/common/Location#back) when the event not subscribed |
+| Param | Description | Type | Default value | Global Config |
+| ----- | ----------- | ---- | ------------- | ------------- |
+| `[nzGhost]` | Make background transparent | `boolean` | `true` | ✅ |
+| `[nzTitle]` | Title string | `string \| TemplateRef<void>` | - | - |
+| `[nzSubtitle]` | SubTitle string | `string \| TemplateRef<void>` | - | - |
+| `[nzBackIcon]` | Custom back icon | `string \| TemplateRef<void>` | - | - |
+| `(nzBack)` | Back icon click event | `EventEmitter<void>` | Call [Location[back]](https://angular.io/api/common/Location#back) when the event not subscribed | - |
 
 ### Page header sections
 | Element | Description |

components/page-header/doc/index.zh-CN.md

@@ -27,12 +27,13 @@ import { NzPageHeaderModule } from 'ng-zorro-antd/page-header';
 ```
 
 ### nz-page-header
-| 参数 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| `[nzTitle]` | title 文字 | `string \| TemplateRef<void>` | - |
-| `[nzSubtitle]` | subTitle 文字 | `string \| TemplateRef<void>` | - |
-| `[nzBackIcon]` | 自定义 back icon | `string \| TemplateRef<void>` | - |
-| `(nzBack)` | 返回按钮的点击事件 | `EventEmitter<void>` | 未订阅该事件时默认调用 [Location[back]](https://angular.cn/api/common/Location#back) |
+| 参数 | 说明 | 类型 | 默认值 | 全局配置 |
+| --- | --- | --- | --- | --- |
+| `[nzGhost]` | 使背景色透明 | `boolean` | `true` | ✅ |
+| `[nzTitle]` | title 文字 | `string \| TemplateRef<void>` | - | - |
+| `[nzSubtitle]` | subTitle 文字 | `string \| TemplateRef<void>` | - | - |
+| `[nzBackIcon]` | 自定义 back icon | `string \| TemplateRef<void>` | - | - |
+| `(nzBack)` | 返回按钮的点击事件 | `EventEmitter<void>` | 未订阅该事件时默认调用 [Location[back]](https://angular.cn/api/common/Location#back) | - |
 
 ### Page header 组成部分
 | 元素 | 说明 |

components/page-header/nz-page-header.component.ts

@@ -21,8 +21,11 @@ import {
 } from '@angular/core';
 
 import { Location } from '@angular/common';
+import { NzConfigService, WithConfig } from 'ng-zorro-antd/core';
 import { NzPageHeaderBreadcrumbDirective, NzPageHeaderFooterDirective } from './nz-page-header-cells';
 
+const NZ_CONFIG_COMPONENT_NAME = 'pageHeader';
+
 @Component({
   selector: 'nz-page-header',
   exportAs: 'nzPageHeader',
@@ -31,8 +34,9 @@ import { NzPageHeaderBreadcrumbDirective, NzPageHeaderFooterDirective } from './
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   host: {
-    class: 'ant-page-header ant-page-header-ghost',
+    class: 'ant-page-header',
     '[class.has-footer]': 'nzPageHeaderFooter',
+    '[class.ant-page-header-ghost]': 'nzGhost',
     '[class.has-breadcrumb]': 'nzPageHeaderBreadcrumb'
   },
   styles: [
@@ -54,6 +58,7 @@ export class NzPageHeaderComponent implements OnChanges {
   @Input() nzBackIcon: string | TemplateRef<void> | null = null;
   @Input() nzTitle: string | TemplateRef<void>;
   @Input() nzSubtitle: string | TemplateRef<void>;
+  @Input() @WithConfig(NZ_CONFIG_COMPONENT_NAME, true) nzGhost: boolean;
   @Output() readonly nzBack = new EventEmitter<void>();
 
   @ContentChild(NzPageHeaderFooterDirective, { static: false }) nzPageHeaderFooter: ElementRef<
@@ -64,7 +69,7 @@ export class NzPageHeaderComponent implements OnChanges {
     NzPageHeaderBreadcrumbDirective
   >;
 
-  constructor(private location: Location) {}
+  constructor(private location: Location, public nzConfigService: NzConfigService) {}
 
   ngOnChanges(changes: SimpleChanges): void {
     if (changes.hasOwnProperty('nzBackIcon')) {

components/page-header/nz-page-header.spec.ts

@@ -5,10 +5,12 @@ import { By } from '@angular/platform-browser';
 import { RouterTestingModule } from '@angular/router/testing';
 import { NzDropDownModule } from 'ng-zorro-antd/dropdown';
 import { NzIconTestModule } from 'ng-zorro-antd/icon/testing';
+
 import { NzDemoPageHeaderActionsComponent } from './demo/actions';
 import { NzDemoPageHeaderBasicComponent } from './demo/basic';
 import { NzDemoPageHeaderBreadcrumbComponent } from './demo/breadcrumb';
 import { NzDemoPageHeaderContentComponent } from './demo/content';
+import { NzDemoPageHeaderGhostComponent } from './demo/ghost';
 import { NzDemoPageHeaderResponsiveComponent } from './demo/responsive';
 
 import { NzPageHeaderComponent } from './nz-page-header.component';
@@ -25,7 +27,8 @@ describe('NzPageHeaderComponent', () => {
         NzDemoPageHeaderBreadcrumbComponent,
         NzDemoPageHeaderContentComponent,
         NzDemoPageHeaderActionsComponent,
-        NzDemoPageHeaderResponsiveComponent
+        NzDemoPageHeaderResponsiveComponent,
+        NzDemoPageHeaderGhostComponent
       ]
     }).compileComponents();
     location = TestBed.get(Location);
@@ -36,10 +39,19 @@ describe('NzPageHeaderComponent', () => {
     const pageHeader = fixture.debugElement.query(By.directive(NzPageHeaderComponent));
     fixture.detectChanges();
     expect(pageHeader.nativeElement.classList).toContain('ant-page-header');
+    expect(pageHeader.nativeElement.classList).toContain('ant-page-header-ghost');
     expect(pageHeader.nativeElement.querySelector('.ant-page-header-heading-title')).toBeTruthy();
     expect(pageHeader.nativeElement.querySelector('.ant-page-header-heading-sub-title')).toBeTruthy();
   });
 
+  it('should ghost work', () => {
+    const fixture = TestBed.createComponent(NzDemoPageHeaderGhostComponent);
+    const pageHeader = fixture.debugElement.query(By.directive(NzPageHeaderComponent));
+    fixture.detectChanges();
+    expect(pageHeader.nativeElement.classList).toContain('ant-page-header');
+    expect(pageHeader.nativeElement.classList).not.toContain('ant-page-header-ghost');
+  });
+
   it('should breadcrumb work', () => {
     const fixture = TestBed.createComponent(NzDemoPageHeaderBreadcrumbComponent);
     const pageHeader = fixture.debugElement.query(By.directive(NzPageHeaderComponent));