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
NG-ZORRO · Mar 27, 2019 · cf51c1f · cf51c1f
1 parent a9cd84d
commit cf51c1f
Show file tree

Hide file tree

Showing 21 changed files with 755 additions and 0 deletions.
diff --git 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
@@ -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
@@ -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
@@ -0,0 +1,139 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-page-header-actions',
+  template: `
+    <nz-page-header nzBackIcon>
+      <nz-page-header-title>Title</nz-page-header-title>
+      <nz-page-header-subtitle>This is a subtitle</nz-page-header-subtitle>
+      <nz-page-header-tags>
+        <nz-tag [nzColor]="'red'">Warning</nz-tag>
+      </nz-page-header-tags>
+      <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>
+        <div class="wrap">
+          <div nz-row class="content padding">
+            <div nz-col nzSpan="12">
+              <div class="description">
+                <span class="term">Created</span>
+                <p class="detail">Lili Qu</p>
+              </div>
+            </div>
+            <div nz-col nzSpan="12">
+              <div class="description">
+                <span class="term">Association</span>
+                <a>421421</a>
+              </div>
+            </div>
+            <div nz-col nzSpan="12">
+              <div class="description">
+                <span class="term">Creation Time</span>
+                <p class="detail">2017-01-10</p>
+              </div>
+            </div>
+            <div nz-col nzSpan="12">
+              <div class="description">
+                <span class="term">Effective Time</span>
+                <p class="detail">2017-01-10</p>
+              </div>
+            </div>
+            <div nz-col nzSpan="12">
+              <div class="description">
+                <span class="term">Remarks</span>
+                <p class="detail">Gonghu Road, Xihu District, Hangzhou, Zhejiang, China</p>
+              </div>
+            </div>
+          </div>
+          <div nz-row class="extra-content">
+            <div nz-col nzSpan="12">
+              <span class="label">Status</span>
+              <p class="detail">Pending</p>
+            </div>
+            <div nz-col nzSpan="12">
+              <span class="label"> Price</span>
+              <p class="detail">$ 568.08</p>
+            </div>
+          </div>
+        </div>
+      </nz-page-header-content>
+      <nz-page-header-footer>
+        <nz-tabset [nzSelectedIndex]="1">
+          <nz-tab nzTitle="Details"></nz-tab>
+          <nz-tab nzTitle="Rule"></nz-tab>
+        </nz-tabset>
+      </nz-page-header-footer>
+    </nz-page-header>
+  `,
+  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
@@ -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
@@ -0,0 +1,26 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-page-header-basic',
+  template: `
+    <nz-page-header
+      (nzBack)="onBack()"
+      nzBackIcon
+      nzTitle="Title"
+      nzSubtitle="This is a subtitle">
+    </nz-page-header>
+  `,
+  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
@@ -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
@@ -0,0 +1,24 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-page-header-breadcrumb',
+  template: `
+    <nz-page-header nzBackIcon nzTitle="Title">
+      <nz-breadcrumb nz-page-header-breadcrumb>
+        <nz-breadcrumb-item>First-level Menu</nz-breadcrumb-item>
+        <nz-breadcrumb-item>
+          <a>Second-level Menu</a>
+        </nz-breadcrumb-item>
+        <nz-breadcrumb-item>Third-level Menu</nz-breadcrumb-item>
+      </nz-breadcrumb>
+    </nz-page-header>
+
+  `,
+  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
@@ -0,0 +1,14 @@
+---
+order: 3
+title:
+  zh-CN: 内容
+  en-US: Content
+---
+
+## zh-CN
+
+你可以使用 `<nz-page-header-content>` 添加内容。
+
+## en-US
+
+You can use `<nz-page-header-content>` to add content.
diff --git a/components/page-header/demo/content.ts b/components/page-header/demo/content.ts
@@ -0,0 +1,83 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-page-header-content',
+  template: `
+    <nz-page-header nzTitle="Page Title">
+      <nz-breadcrumb nz-page-header-breadcrumb>
+        <nz-breadcrumb-item>First-level Menu</nz-breadcrumb-item>
+        <nz-breadcrumb-item>
+          <a>Second-level Menu</a>
+        </nz-breadcrumb-item>
+        <nz-breadcrumb-item>Third-level Menu</nz-breadcrumb-item>
+      </nz-breadcrumb>
+      <nz-page-header-content>
+        <div class="wrap">
+          <div class="content">
+            <div class="content">
+              <p>Ant Design interprets the color system into two levels: a system-level color system and a product-level
+                color system.</p>
+              <p>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.</p>
+              <p class="content-link">
+                <a>
+                  <img src="https://gw.alipayobjects.com/zos/rmsportal/MjEImQtenlyueSmVEfUD.svg" alt="start">Quick Start
+                </a>
+                <a>
+                  <img src="https://gw.alipayobjects.com/zos/rmsportal/NbuDUAuBlIApFuDvWiND.svg" alt="info">Product Info
+                </a>
+                <a>
+                  <img src="https://gw.alipayobjects.com/zos/rmsportal/ohOEPSYdDTNnyMbGuyLb.svg" alt="doc">Product Doc
+                </a>
+              </p>
+            </div>
+          </div>
+          <div class="extra-content">
+            <img src="https://gw.alipayobjects.com/mdn/mpaas_user/afts/img/A*KsfVQbuLRlYAAAAAAAAAAABjAQAAAQ/original" alt="content">
+          </div>
+        </div>
+      </nz-page-header-content>
+    </nz-page-header>
+  `,
+  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 {
+}