Skip to content

Commit

Permalink
feat(module:page-header): add nzGhost property (#4306)
Browse files Browse the repository at this point in the history
* feat(module:page-header): add `nzGhost` property

* chore: add config name cont

close #4303
  • Loading branch information
hsuanxyz authored and chensimeng committed Nov 8, 2019
1 parent 09f1ec6 commit 4c78cca
Show file tree
Hide file tree
Showing 11 changed files with 95 additions and 19 deletions.
5 changes: 5 additions & 0 deletions components/core/config/config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ export interface NzConfig {
message?: MessageConfig;
modal?: ModalConfig;
notification?: NotificationConfig;
pageHeader?: PageHeaderConfig;
progress?: ProgressConfig;
rate?: RateConfig;
spin?: SpinConfig;
Expand Down Expand Up @@ -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';
Expand Down
2 changes: 1 addition & 1 deletion components/page-header/demo/actions.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
order: 4
order: 5
title:
zh-CN: 多种形态的 PageHeader
en-US: Various forms of PageHeader
Expand Down
2 changes: 1 addition & 1 deletion components/page-header/demo/breadcrumb.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
order: 2
order: 3
title:
zh-CN: 带面包屑页头
en-US: Use with breadcrumbs
Expand Down
2 changes: 1 addition & 1 deletion components/page-header/demo/content.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
order: 3
order: 4
title:
zh-CN: 组合示例
en-US: Complete example
Expand Down
14 changes: 14 additions & 0 deletions components/page-header/demo/ghost.md
Original file line number Diff line number Diff line change
@@ -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.
38 changes: 38 additions & 0 deletions components/page-header/demo/ghost.ts
Original file line number Diff line number Diff line change
@@ -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 {}
2 changes: 1 addition & 1 deletion components/page-header/demo/responsive.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
order: 5
order: 6
title:
zh-CN: 响应式
en-US: responsive
Expand Down
13 changes: 7 additions & 6 deletions components/page-header/doc/index.en-US.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 |
Expand Down
13 changes: 7 additions & 6 deletions components/page-header/doc/index.zh-CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 组成部分
| 元素 | 说明 |
Expand Down
9 changes: 7 additions & 2 deletions components/page-header/nz-page-header.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -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: [
Expand All @@ -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<
Expand All @@ -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')) {
Expand Down
14 changes: 13 additions & 1 deletion components/page-header/nz-page-header.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -25,7 +27,8 @@ describe('NzPageHeaderComponent', () => {
NzDemoPageHeaderBreadcrumbComponent,
NzDemoPageHeaderContentComponent,
NzDemoPageHeaderActionsComponent,
NzDemoPageHeaderResponsiveComponent
NzDemoPageHeaderResponsiveComponent,
NzDemoPageHeaderGhostComponent
]
}).compileComponents();
location = TestBed.get(Location);
Expand All @@ -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));
Expand Down

0 comments on commit 4c78cca

Please sign in to comment.