From 4c78cca07d7391b0b4a52bfab176b50b09a96109 Mon Sep 17 00:00:00 2001 From: Hsuan Lee Date: Fri, 8 Nov 2019 18:08:00 +0800 Subject: [PATCH] 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 | 5 +++ components/page-header/demo/actions.md | 2 +- components/page-header/demo/breadcrumb.md | 2 +- components/page-header/demo/content.md | 2 +- components/page-header/demo/ghost.md | 14 +++++++ components/page-header/demo/ghost.ts | 38 +++++++++++++++++++ components/page-header/demo/responsive.md | 2 +- components/page-header/doc/index.en-US.md | 13 ++++--- components/page-header/doc/index.zh-CN.md | 13 ++++--- .../page-header/nz-page-header.component.ts | 9 ++++- components/page-header/nz-page-header.spec.ts | 14 ++++++- 11 files changed, 95 insertions(+), 19 deletions(-) create mode 100644 components/page-header/demo/ghost.md create mode 100644 components/page-header/demo/ghost.ts diff --git a/components/core/config/config.ts b/components/core/config/config.ts index 904355f5c8f..96371be5e03 100644 --- a/components/core/config/config.ts +++ b/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'; diff --git a/components/page-header/demo/actions.md b/components/page-header/demo/actions.md index 3e822b76c65..b30585486a5 100644 --- a/components/page-header/demo/actions.md +++ b/components/page-header/demo/actions.md @@ -1,5 +1,5 @@ --- -order: 4 +order: 5 title: zh-CN: 多种形态的 PageHeader en-US: Various forms of PageHeader diff --git a/components/page-header/demo/breadcrumb.md b/components/page-header/demo/breadcrumb.md index c1d60fe2d1c..a294eb09f88 100644 --- a/components/page-header/demo/breadcrumb.md +++ b/components/page-header/demo/breadcrumb.md @@ -1,5 +1,5 @@ --- -order: 2 +order: 3 title: zh-CN: 带面包屑页头 en-US: Use with breadcrumbs diff --git a/components/page-header/demo/content.md b/components/page-header/demo/content.md index 4874e634b16..e8541618ae4 100644 --- a/components/page-header/demo/content.md +++ b/components/page-header/demo/content.md @@ -1,5 +1,5 @@ --- -order: 3 +order: 4 title: zh-CN: 组合示例 en-US: Complete example diff --git a/components/page-header/demo/ghost.md b/components/page-header/demo/ghost.md new file mode 100644 index 00000000000..c1c8563f181 --- /dev/null +++ b/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. \ No newline at end of file diff --git a/components/page-header/demo/ghost.ts b/components/page-header/demo/ghost.ts new file mode 100644 index 00000000000..c36706d45cb --- /dev/null +++ b/components/page-header/demo/ghost.ts @@ -0,0 +1,38 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'nz-demo-page-header-ghost', + template: ` +
+ + Title + This is a subtitle + + + + + + + + Lili Qu + 421421 + 2017-01-10 + 2017-10-10 + + Gonghu Road, Xihu District, Hangzhou, Zhejiang, China + + + + +
+ `, + styles: [ + ` + .wrap { + background-color: #f5f5f5; + padding: 24px; + } + ` + ] +}) +export class NzDemoPageHeaderGhostComponent {} diff --git a/components/page-header/demo/responsive.md b/components/page-header/demo/responsive.md index a6a13a13af3..c919f28b473 100644 --- a/components/page-header/demo/responsive.md +++ b/components/page-header/demo/responsive.md @@ -1,5 +1,5 @@ --- -order: 5 +order: 6 title: zh-CN: 响应式 en-US: responsive diff --git a/components/page-header/doc/index.en-US.md b/components/page-header/doc/index.en-US.md index 99dcd10a587..1e16ebfbe95 100644 --- a/components/page-header/doc/index.en-US.md +++ b/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` | - | -| `[nzSubtitle]` | SubTitle string | `string \| TemplateRef` | - | -| `[nzBackIcon]` | Custom back icon | `string \| TemplateRef` | - | -| `(nzBack)` | Back icon click event | `EventEmitter` | 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` | - | - | +| `[nzSubtitle]` | SubTitle string | `string \| TemplateRef` | - | - | +| `[nzBackIcon]` | Custom back icon | `string \| TemplateRef` | - | - | +| `(nzBack)` | Back icon click event | `EventEmitter` | Call [Location[back]](https://angular.io/api/common/Location#back) when the event not subscribed | - | ### Page header sections | Element | Description | diff --git a/components/page-header/doc/index.zh-CN.md b/components/page-header/doc/index.zh-CN.md index e081c563c5f..30d9c1ea49c 100644 --- a/components/page-header/doc/index.zh-CN.md +++ b/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` | - | -| `[nzSubtitle]` | subTitle 文字 | `string \| TemplateRef` | - | -| `[nzBackIcon]` | 自定义 back icon | `string \| TemplateRef` | - | -| `(nzBack)` | 返回按钮的点击事件 | `EventEmitter` | 未订阅该事件时默认调用 [Location[back]](https://angular.cn/api/common/Location#back) | +| 参数 | 说明 | 类型 | 默认值 | 全局配置 | +| --- | --- | --- | --- | --- | +| `[nzGhost]` | 使背景色透明 | `boolean` | `true` | ✅ | +| `[nzTitle]` | title 文字 | `string \| TemplateRef` | - | - | +| `[nzSubtitle]` | subTitle 文字 | `string \| TemplateRef` | - | - | +| `[nzBackIcon]` | 自定义 back icon | `string \| TemplateRef` | - | - | +| `(nzBack)` | 返回按钮的点击事件 | `EventEmitter` | 未订阅该事件时默认调用 [Location[back]](https://angular.cn/api/common/Location#back) | - | ### Page header 组成部分 | 元素 | 说明 | diff --git a/components/page-header/nz-page-header.component.ts b/components/page-header/nz-page-header.component.ts index 9367628007e..c49247cde24 100644 --- a/components/page-header/nz-page-header.component.ts +++ b/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 | null = null; @Input() nzTitle: string | TemplateRef; @Input() nzSubtitle: string | TemplateRef; + @Input() @WithConfig(NZ_CONFIG_COMPONENT_NAME, true) nzGhost: boolean; @Output() readonly nzBack = new EventEmitter(); @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')) { diff --git a/components/page-header/nz-page-header.spec.ts b/components/page-header/nz-page-header.spec.ts index 5e7e58877ad..e85ecaa3e5a 100644 --- a/components/page-header/nz-page-header.spec.ts +++ b/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));