From cf51c1fa940e34e1bb0bf84c68d55a8bdc002b57 Mon Sep 17 00:00:00 2001 From: Hsuan Lee Date: Wed, 27 Mar 2019 18:02:51 +0800 Subject: [PATCH] feat(module:page-header): add page-header component (#2732) * feat(module:page-header): add page-header component * test(module:page-header): add test * style(module:page-header): fix tslint close #2710 * docs(module:page-header): update docs * chore: sync class name * test(module:page-header): fix test --- components/components.less | 1 + components/ng-zorro-antd.module.ts | 3 + components/page-header/demo/actions.md | 14 ++ components/page-header/demo/actions.ts | 139 ++++++++++++++++++ components/page-header/demo/basic.md | 14 ++ components/page-header/demo/basic.ts | 26 ++++ components/page-header/demo/breadcrumb.md | 14 ++ components/page-header/demo/breadcrumb.ts | 24 +++ components/page-header/demo/content.md | 14 ++ components/page-header/demo/content.ts | 83 +++++++++++ components/page-header/doc/index.en-US.md | 37 +++++ components/page-header/doc/index.zh-CN.md | 39 +++++ components/page-header/index.ts | 1 + .../page-header/nz-page-header-cells.ts | 54 +++++++ .../page-header/nz-page-header.component.html | 23 +++ .../page-header/nz-page-header.component.less | 3 + .../page-header/nz-page-header.component.ts | 53 +++++++ .../page-header/nz-page-header.module.ts | 30 ++++ components/page-header/nz-page-header.spec.ts | 90 ++++++++++++ components/page-header/public-api.ts | 3 + components/page-header/style/index.less | 90 ++++++++++++ 21 files changed, 755 insertions(+) create mode 100644 components/page-header/demo/actions.md create mode 100644 components/page-header/demo/actions.ts create mode 100644 components/page-header/demo/basic.md create mode 100644 components/page-header/demo/basic.ts create mode 100644 components/page-header/demo/breadcrumb.md create mode 100644 components/page-header/demo/breadcrumb.ts create mode 100644 components/page-header/demo/content.md create mode 100644 components/page-header/demo/content.ts create mode 100644 components/page-header/doc/index.en-US.md create mode 100644 components/page-header/doc/index.zh-CN.md create mode 100644 components/page-header/index.ts create mode 100644 components/page-header/nz-page-header-cells.ts create mode 100644 components/page-header/nz-page-header.component.html create mode 100644 components/page-header/nz-page-header.component.less create mode 100644 components/page-header/nz-page-header.component.ts create mode 100644 components/page-header/nz-page-header.module.ts create mode 100644 components/page-header/nz-page-header.spec.ts create mode 100644 components/page-header/public-api.ts create mode 100644 components/page-header/style/index.less diff --git a/components/components.less b/components/components.less index fb3a51e9cf3..a014fdbcbcb 100644 --- a/components/components.less +++ b/components/components.less @@ -28,6 +28,7 @@ @import "./message/style/index.less"; @import "./modal/style/index.less"; @import "./notification/style/index.less"; +@import "./page-header/style/index.less"; @import "./pagination/style/index.less"; @import "./popconfirm/style/index.less"; @import "./popover/style/index.less"; diff --git a/components/ng-zorro-antd.module.ts b/components/ng-zorro-antd.module.ts index 98cd4390415..d461c9709f6 100644 --- a/components/ng-zorro-antd.module.ts +++ b/components/ng-zorro-antd.module.ts @@ -36,6 +36,7 @@ import { NzMenuModule } from './menu/nz-menu.module'; import { NzMessageModule } from './message/nz-message.module'; import { NzModalModule } from './modal/nz-modal.module'; import { NzNotificationModule } from './notification/nz-notification.module'; +import { NzPageHeaderModule } from './page-header/nz-page-header.module'; import { NzPaginationModule } from './pagination/nz-pagination.module'; import { NzPopconfirmModule } from './popconfirm/nz-popconfirm.module'; import { NzPopoverModule } from './popover/nz-popover.module'; @@ -90,6 +91,7 @@ export * from './layout'; export * from './list'; export * from './mention'; export * from './menu'; +export * from './page-header'; export * from './pagination'; export * from './progress'; export * from './radio'; @@ -149,6 +151,7 @@ export * from './core/no-animation'; NzRadioModule, NzAlertModule, NzSpinModule, + NzPageHeaderModule, NzProgressModule, NzTabsModule, NzIconModule, diff --git a/components/page-header/demo/actions.md b/components/page-header/demo/actions.md new file mode 100644 index 00000000000..54119f64911 --- /dev/null +++ b/components/page-header/demo/actions.md @@ -0,0 +1,14 @@ +--- +order: 5 +title: + zh-CN: 复杂的例子 + en-US: Complex example +--- + +## zh-CN + +使用操作区，并自定义子节点 + +## en-US + +Use the action area and customize the child nodes diff --git a/components/page-header/demo/actions.ts b/components/page-header/demo/actions.ts new file mode 100644 index 00000000000..fbddc37b225 --- /dev/null +++ b/components/page-header/demo/actions.ts @@ -0,0 +1,139 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'nz-demo-page-header-actions', + template: ` + + Title + This is a subtitle + + Warning + + + + + + + +
+
+
+
+ Created +

Lili Qu

+
+
+
+
+ Association + 421421 +
+
+
+
+ Creation Time +

2017-01-10

+
+
+
+
+ Effective Time +

2017-01-10

+
+
+
+
+ Remarks +

Gonghu Road, Xihu District, Hangzhou, Zhejiang, China

+
+
+
+
+
+ Status +

Pending

+
+
+ Price +

$ 568.08

+
+
+
+ + + + + + + + + `, + styles : [ + ` + nz-page-header { + border: 1px solid rgb(235, 237, 240); + } + + .wrap { + display: flex; + } + + .content { + flex: 1; + } + + .content.padding { + padding-left: 40px; + } + + .content p { + margin-bottom: 8px; + } + + .content .description { + display: table; + } + + .description .term { + display: table-cell; + margin-right: 8px; + padding-bottom: 8px; + white-space: nowrap; + line-height: 20px; + } + + .description .term:after { + position: relative; + top: -0.5px; + margin: 0 8px 0 2px; + content: ":"; + } + + .description .detail { + display: table-cell; + padding-bottom: 8px; + width: 100%; + line-height: 20px; + } + + .extra-content { + min-width: 240px; + text-align: right; + } + + .extra-content .label { + font-size: 14px; + color: rgba(0, 0, 0, 0.45); + line-height: 22px; + } + + .extra-content .detail { + font-size: 20px; + color: rgba(0, 0, 0, 0.85); + line-height: 28px; + } + ` + ] +}) +export class NzDemoPageHeaderActionsComponent { +} diff --git a/components/page-header/demo/basic.md b/components/page-header/demo/basic.md new file mode 100644 index 00000000000..3c15f53665e --- /dev/null +++ b/components/page-header/demo/basic.md @@ -0,0 +1,14 @@ +--- +order: 1 +title: + zh-CN: 标准样式 + en-US: Basic Page Header +--- + +## zh-CN + +标准页头 + +## en-US + +Basic Page Header diff --git a/components/page-header/demo/basic.ts b/components/page-header/demo/basic.ts new file mode 100644 index 00000000000..556d8476bef --- /dev/null +++ b/components/page-header/demo/basic.ts @@ -0,0 +1,26 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'nz-demo-page-header-basic', + template: ` + + + `, + styles : [ + ` + nz-page-header { + border: 1px solid rgb(235, 237, 240); + } + ` + ] +}) +export class NzDemoPageHeaderBasicComponent { + + onBack() { + console.log('onBack'); + } +} diff --git a/components/page-header/demo/breadcrumb.md b/components/page-header/demo/breadcrumb.md new file mode 100644 index 00000000000..077b9638490 --- /dev/null +++ b/components/page-header/demo/breadcrumb.md @@ -0,0 +1,14 @@ +--- +order: 2 +title: + zh-CN: 带面包屑页头 + en-US: Use with breadcrumbs +--- + +## zh-CN + +带面包屑页头 + +## en-US + +Use with breadcrumbs diff --git a/components/page-header/demo/breadcrumb.ts b/components/page-header/demo/breadcrumb.ts new file mode 100644 index 00000000000..ef7f745e095 --- /dev/null +++ b/components/page-header/demo/breadcrumb.ts @@ -0,0 +1,24 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'nz-demo-page-header-breadcrumb', + template: ` + + + First-level Menu + + Second-level Menu + + Third-level Menu + + + + `, + styles : [ ` + nz-page-header { + border: 1px solid rgb(235, 237, 240); + } + ` ] +}) +export class NzDemoPageHeaderBreadcrumbComponent { +} diff --git a/components/page-header/demo/content.md b/components/page-header/demo/content.md new file mode 100644 index 00000000000..50a7e735d9d --- /dev/null +++ b/components/page-header/demo/content.md @@ -0,0 +1,14 @@ +--- +order: 3 +title: + zh-CN: 内容 + en-US: Content +--- + +## zh-CN + +你可以使用 `` 添加内容。 + +## en-US + +You can use `` to add content. diff --git a/components/page-header/demo/content.ts b/components/page-header/demo/content.ts new file mode 100644 index 00000000000..4797cb26d9a --- /dev/null +++ b/components/page-header/demo/content.ts @@ -0,0 +1,83 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'nz-demo-page-header-content', + template: ` + + + First-level Menu + + Second-level Menu + + Third-level Menu + + +
+
+
+

Ant Design interprets the color system into two levels: a system-level color system and a product-level + color system.

+

Ant Design's design team preferred to design with the HSB color model, which makes it easier for + designers to have a clear psychological expectation of color when adjusting colors, as well as + facilitate communication in teams.

+

+ + startQuick Start + + + infoProduct Info + + + docProduct Doc + +

+
+
+
+ content +
+
+ + + `, + styles : [ + ` + nz-page-header { + border: 1px solid rgb(235, 237, 240); + } + + .wrap { + display: flex; + } + + .content { + flex: 1; + } + + .content p { + margin-bottom: 8px; + } + + .content-link { + padding-top: 16px; + } + + .content-link a { + display: inline-block; + vertical-align: text-top; + margin-right: 32px; + } + + .content-link a img { + margin-right: 8px; + } + + .extra-content { + min-width: 240px; + text-align: right; + } + ` + ] +}) +export class NzDemoPageHeaderContentComponent { +} diff --git a/components/page-header/doc/index.en-US.md b/components/page-header/doc/index.en-US.md new file mode 100644 index 00000000000..1d6d13f0f66 --- /dev/null +++ b/components/page-header/doc/index.en-US.md @@ -0,0 +1,37 @@ +--- +category: Components +type: Navigation +title: PageHeader +cols: 1 +--- + +The header is used to declare the theme of the page, which contains the most important information that the user is concerned about. + +## When To Use + +Use when you need the user to quickly understand what the current page is and what its features are. + +## API + +```html + +``` + +### 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` | - | + +### Page header sections +| Element | Description | +| ----- | ----------- | ---- | ------------- | +| `` | Title section | +| `` | Subtitle section, `[nzTitle]` has high priority | +| `` | Content section, `[nzSubTitle]` has high priority | +| `` | Footer section | +| `` | Tags container after the title | +| `` | Operating area, at the end of the line of the title line | +| `` | Breadcrumb section | \ No newline at end of file diff --git a/components/page-header/doc/index.zh-CN.md b/components/page-header/doc/index.zh-CN.md new file mode 100644 index 00000000000..14d7538f479 --- /dev/null +++ b/components/page-header/doc/index.zh-CN.md @@ -0,0 +1,39 @@ +--- +category: Components +type: Navigation +title: PageHeader +cols: 1 +subtitle: 页头 +--- + +页头用来声明页面的主题，包含了用户所关注的最重要的信息。 + +## 何时使用 + +当需要用户快速理解当前页面是什么以及它的功能时使用。 + +## API + +```html + +``` + +### nz-page-header +| 参数 | 说明 | 类型 | 默认值 | +| --- | --- | --- | --- | +| `[nzTitle]` | title 文字 | `string｜TemplateRef` | - | +| `[nzSubTitle]` | subTitle 文字 | `string｜TemplateRef` | - | +| `[nzBackIcon]` | 自定义 back icon | `string｜TemplateRef` | - | +| `[nzBack]` | 返回按钮的点击事件 | `EventEmitter` | - | + +### Page header 组成部分 +| 元素 | 说明 | +| ----- | ----------- | ---- | ------------- | +| `` | title 部分，`[nzTitle]` 优先级更高 | +| `` | subtitle 部分，`[nzSubTitle]` 优先级更高 | +| `` | 内容部分 | +| `` | 底部部分 | +| `` | title 旁的 tag 列表容器 | +| `` | title 的行尾操作区部分 | +| `` | 面包屑部分 | + diff --git a/components/page-header/index.ts b/components/page-header/index.ts new file mode 100644 index 00000000000..7e1a213e3ea --- /dev/null +++ b/components/page-header/index.ts @@ -0,0 +1 @@ +export * from './public-api'; diff --git a/components/page-header/nz-page-header-cells.ts b/components/page-header/nz-page-header-cells.ts new file mode 100644 index 00000000000..16bdf2fcff4 --- /dev/null +++ b/components/page-header/nz-page-header-cells.ts @@ -0,0 +1,54 @@ +import { Directive } from '@angular/core'; + +@Directive({ + selector: 'nz-page-header-title, [nz-page-header-title]', + host: { + class: 'ant-page-header-title-view-title' + } +}) +export class NzPageHeaderTitleDirective {} + +@Directive({ + selector: 'nz-page-header-subtitle, [nz-page-header-subtitle]', + host: { + class: 'ant-page-header-title-view-sub-title' + } +}) +export class NzPageHeaderSubtitleDirective {} + +@Directive({ + selector: 'nz-page-header-content, [nz-page-header-content]', + host: { + class: 'ant-page-header-content-view' + } +}) +export class NzPageHeaderContentDirective {} + +@Directive({ + selector: 'nz-page-header-tags, [nz-page-header-tags]', + host: { + class: 'ant-page-header-title-view-tags' + } +}) +export class NzPageHeaderTagDirective {} + +@Directive({ + selector: 'nz-page-header-extra, [nz-page-header-extra]', + host: { + class: 'ant-page-header-title-view-extra' + } +}) +export class NzPageHeaderExtraDirective {} + +@Directive({ + selector: 'nz-page-header-footer, [nz-page-header-footer]', + host: { + class: 'ant-page-header-footer' + } +}) +export class NzPageHeaderFooterDirective {} + +@Directive({ + selector: 'nz-breadcrumb[nz-page-header-breadcrumb]' +}) +export class NzPageHeaderBreadcrumbDirective {} diff --git a/components/page-header/nz-page-header.component.html b/components/page-header/nz-page-header.component.html new file mode 100644 index 00000000000..0556d96660d --- /dev/null +++ b/components/page-header/nz-page-header.component.html @@ -0,0 +1,23 @@ + + +
+ + + +
+ +
+ + {{ nzTitle }} + + + + {{ nzSubtitle }} + + + + +
+ + + diff --git a/components/page-header/nz-page-header.component.less b/components/page-header/nz-page-header.component.less new file mode 100644 index 00000000000..efbc7fc734d --- /dev/null +++ b/components/page-header/nz-page-header.component.less @@ -0,0 +1,3 @@ +nz-page-header, nz-page-header-content, nz-page-header-footer { + display: block; +} \ No newline at end of file diff --git a/components/page-header/nz-page-header.component.ts b/components/page-header/nz-page-header.component.ts new file mode 100644 index 00000000000..91631f0a828 --- /dev/null +++ b/components/page-header/nz-page-header.component.ts @@ -0,0 +1,53 @@ +import { + ChangeDetectionStrategy, + Component, + ContentChild, + ElementRef, + EventEmitter, + Input, + OnChanges, + OnInit, + Output, + SimpleChanges, + TemplateRef, + ViewEncapsulation +} from '@angular/core'; +import { NzPageHeaderFooterDirective } from './nz-page-header-cells'; + +@Component({ + selector: 'nz-page-header', + templateUrl: './nz-page-header.component.html', + styleUrls: ['./nz-page-header.component.less'], + changeDetection: ChangeDetectionStrategy.OnPush, + encapsulation: ViewEncapsulation.None, + host: { + class: 'ant-page-header', + '[class.ant-page-header-has-footer]': 'nzPageHeaderFooter' + } +}) +export class NzPageHeaderComponent implements OnInit, OnChanges { + isTemplateRefBackIcon = false; + isStringBackIcon = false; + + @Input() nzBackIcon: string | TemplateRef | null = null; + @Input() nzTitle: string | TemplateRef; + @Input() nzSubtitle: string | TemplateRef; + @Output() readonly nzBack = new EventEmitter(); + + @ContentChild(NzPageHeaderFooterDirective) nzPageHeaderFooter: ElementRef; + + constructor() {} + + ngOnInit(): void {} + + ngOnChanges(changes: SimpleChanges): void { + if (changes.hasOwnProperty('nzBackIcon')) { + this.isTemplateRefBackIcon = changes.nzBackIcon.currentValue instanceof TemplateRef; + this.isStringBackIcon = typeof changes.nzBackIcon.currentValue === 'string'; + } + } + + onBack(): void { + this.nzBack.emit(); + } +} diff --git a/components/page-header/nz-page-header.module.ts b/components/page-header/nz-page-header.module.ts new file mode 100644 index 00000000000..06a37542a12 --- /dev/null +++ b/components/page-header/nz-page-header.module.ts @@ -0,0 +1,30 @@ +import { CommonModule } from '@angular/common'; +import { NgModule } from '@angular/core'; +import { NzAddOnModule } from '../core/addon/addon.module'; +import { NzDividerModule } from '../divider/nz-divider.module'; +import { NzIconModule } from '../icon/nz-icon.module'; +import { + NzPageHeaderBreadcrumbDirective, + NzPageHeaderContentDirective, NzPageHeaderExtraDirective, NzPageHeaderFooterDirective, + NzPageHeaderSubtitleDirective, NzPageHeaderTagDirective, + NzPageHeaderTitleDirective +} from './nz-page-header-cells'; +import { NzPageHeaderComponent } from './nz-page-header.component'; + +const NzPageHeaderCells = [ + NzPageHeaderTitleDirective, + NzPageHeaderSubtitleDirective, + NzPageHeaderContentDirective, + NzPageHeaderTagDirective, + NzPageHeaderExtraDirective, + NzPageHeaderFooterDirective, + NzPageHeaderBreadcrumbDirective +]; + +@NgModule({ + imports : [ CommonModule, NzAddOnModule, NzIconModule, NzDividerModule ], + exports : [ NzPageHeaderComponent, ...NzPageHeaderCells ], + declarations: [ NzPageHeaderComponent, ...NzPageHeaderCells ] +}) +export class NzPageHeaderModule { +} diff --git a/components/page-header/nz-page-header.spec.ts b/components/page-header/nz-page-header.spec.ts new file mode 100644 index 00000000000..d1ca933faa1 --- /dev/null +++ b/components/page-header/nz-page-header.spec.ts @@ -0,0 +1,90 @@ +import { NO_ERRORS_SCHEMA } from '@angular/core'; +import { async, TestBed } from '@angular/core/testing'; +import { By } from '@angular/platform-browser'; +import { NzIconTestModule } from '../icon/nz-icon-test.module'; +import { NzDemoPageHeaderActionsComponent } from './demo/actions'; +import { NzDemoPageHeaderBasicComponent } from './demo/basic'; +import { NzDemoPageHeaderBreadcrumbComponent } from './demo/breadcrumb'; +import { NzDemoPageHeaderContentComponent } from './demo/content'; + +import { NzPageHeaderComponent } from './nz-page-header.component'; +import { NzPageHeaderModule } from './nz-page-header.module'; + +describe('NzPageHeaderComponent', () => { + beforeEach(async(() => { + TestBed.configureTestingModule({ + imports: [NzPageHeaderModule, NzIconTestModule], + schemas: [NO_ERRORS_SCHEMA], + declarations: [ + NzDemoPageHeaderBasicComponent, + NzDemoPageHeaderBreadcrumbComponent, + NzDemoPageHeaderContentComponent, + NzDemoPageHeaderActionsComponent + ] + }).compileComponents(); + })); + + it('should basic work', () => { + const fixture = TestBed.createComponent(NzDemoPageHeaderBasicComponent); + const pageHeader = fixture.debugElement.query(By.directive(NzPageHeaderComponent)); + fixture.detectChanges(); + expect(pageHeader.nativeElement.classList).toContain('ant-page-header'); + expect(pageHeader.nativeElement.querySelector('.ant-page-header-title-view-title')).toBeTruthy(); + expect(pageHeader.nativeElement.querySelector('.ant-page-header-title-view-sub-title')).toBeTruthy(); + }); + + it('should breadcrumb work', () => { + const fixture = TestBed.createComponent(NzDemoPageHeaderBreadcrumbComponent); + const pageHeader = fixture.debugElement.query(By.directive(NzPageHeaderComponent)); + fixture.detectChanges(); + expect(pageHeader.nativeElement.querySelector('nz-breadcrumb[nz-page-header-breadcrumb]')).toBeTruthy(); + }); + + it('should content work', () => { + const fixture = TestBed.createComponent(NzDemoPageHeaderContentComponent); + const pageHeader = fixture.debugElement.query(By.directive(NzPageHeaderComponent)); + fixture.detectChanges(); + const content = pageHeader.nativeElement.querySelector('nz-page-header-content.ant-page-header-content-view'); + expect(content).toBeTruthy(); + expect((content as HTMLElement).children.length > 0).toBe(true); + }); + + it('should actions work', () => { + const fixture = TestBed.createComponent(NzDemoPageHeaderActionsComponent); + const pageHeader = fixture.debugElement.query(By.directive(NzPageHeaderComponent)); + fixture.detectChanges(); + expect(pageHeader.nativeElement.classList).toContain('ant-page-header-has-footer'); + expect( + pageHeader.nativeElement.querySelector('nz-page-header-extra.ant-page-header-title-view-extra') + ).toBeTruthy(); + expect(pageHeader.nativeElement.querySelector('nz-page-header-tags.ant-page-header-title-view-tags')).toBeTruthy(); + expect(pageHeader.nativeElement.querySelector('nz-page-header-footer.ant-page-header-footer')).toBeTruthy(); + }); + + it('should have an default back icon', () => { + const fixture = TestBed.createComponent(NzDemoPageHeaderBasicComponent); + const pageHeader = fixture.debugElement.query(By.directive(NzPageHeaderComponent)); + fixture.detectChanges(); + expect(pageHeader.nativeElement.querySelector('.ant-page-header-back-icon > i.anticon-arrow-left')).toBeTruthy(); + }); + + it('should does not have an default back icon', () => { + const fixture = TestBed.createComponent(NzDemoPageHeaderContentComponent); + const pageHeader = fixture.debugElement.query(By.directive(NzPageHeaderComponent)); + fixture.detectChanges(); + expect(pageHeader.nativeElement.querySelector('.ant-page-header-back-icon')).toBeFalsy(); + }); + + it('should nzBack work', () => { + const fixture = TestBed.createComponent(NzDemoPageHeaderBasicComponent); + const pageHeader = fixture.debugElement.query(By.directive(NzPageHeaderComponent)); + const context = fixture.componentInstance; + spyOn(context, 'onBack'); + fixture.detectChanges(); + expect(context.onBack).not.toHaveBeenCalled(); + const back = pageHeader.nativeElement.querySelector('.ant-page-header-back-icon'); + (back as HTMLElement).click(); + fixture.detectChanges(); + expect(context.onBack).toHaveBeenCalled(); + }); +}); diff --git a/components/page-header/public-api.ts b/components/page-header/public-api.ts new file mode 100644 index 00000000000..7877c0604cd --- /dev/null +++ b/components/page-header/public-api.ts @@ -0,0 +1,3 @@ +export * from './nz-page-header.module'; +export * from './nz-page-header.component'; +export * from './nz-page-header-cells'; diff --git a/components/page-header/style/index.less b/components/page-header/style/index.less new file mode 100644 index 00000000000..433117b6d49 --- /dev/null +++ b/components/page-header/style/index.less @@ -0,0 +1,90 @@ +@import '../../style/themes/default'; +@import '../../style/mixins/index'; + +@pageheader-prefix-cls: ~'@{ant-prefix}-page-header'; + +.@{pageheader-prefix-cls} { + .reset-component; + position: relative; + padding: 16px 32px; + background: @component-background; + + &.@{pageheader-prefix-cls}-has-footer { + padding: 20px 32px; + padding-bottom: 0; + } + + &-back-icon { + display: inline-block; + padding: 4px 0; + font-size: 16px; + line-height: 100%; + cursor: pointer; + i:hover { + color: @primary-color; + } + } + + .@{ant-prefix}-divider { + height: 14px; + margin: 0 12px; + } + + .@{ant-prefix}-breadcrumb { + margin-bottom: 12px; + } + + &-title-view { + display: inline-block; + &-title { + display: inline-block; + padding-right: 12px; + color: @heading-color; + font-weight: bold; + font-size: 16px; + line-height: 1.4; + } + + &-sub-title { + display: inline-block; + padding-right: 12px; + color: @text-color-secondary; + font-size: 14px; + line-height: 1.8; + } + + &-tags { + display: inline-block; + vertical-align: top; + } + + &-extra { + position: absolute; + top: 16px; + right: 32px; + > * { + margin-right: 8px; + } + > *:last-child { + margin-right: 0; + } + } + } + + &-content-view { + padding-top: 12px; + } + + &-footer { + margin: 0 -8px; + padding-top: 24px; + .@{ant-prefix}-tabs-bar { + margin-bottom: 1px; + border-bottom: 0; + .@{ant-prefix}-tabs-nav .@{ant-prefix}-tabs-tab { + padding: 12px 8px; + padding-top: 0; + } + } + } +} \ No newline at end of file