feat(module:page-header): new pageheader style and support avatar

components/page-header/demo/actions.md

@@ -1,14 +1,14 @@
 ---
-order: 5
+order: 4
 title:
-  zh-CN: 复杂的例子
-  en-US: Complex example
+  zh-CN: 多种形态的 PageHeader
+  en-US: Various forms of PageHeader
 ---
 
 ## zh-CN
 
-使用操作区，并自定义子节点
+使用操作区，并自定义子节点，适合使用在需要展示一些复杂的信息，帮助用户快速了解这个页面的信息和操作。
 
 ## en-US
 
-Use the action area and customize the child nodes
+Use the operating area and customize the sub-nodes, suitable for use in the need to display some complex information to help users quickly understand the information and operations of this page.

components/page-header/demo/actions.ts

@@ -3,84 +3,52 @@ 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-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>
+    <br />
     <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-tag nzColor="blue">Runing</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">
-            <nz-descriptions [nzColumn]="2">
-              <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>
-          </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-row nzType="flex">
+          <nz-statistic nzTitle="Status" nzValue="Pending"></nz-statistic>
+          <nz-statistic nzTitle="Price" [nzValue]="568.08" nzPrefix="$" style="margin: 0 32px"></nz-statistic>
+          <nz-statistic nzTitle="Balance" [nzValue]="3345.08" nzPrefix="$"></nz-statistic>
+        </nz-row>
       </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;
-      }
-
-      .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;
-      }
     `
   ]
 })

components/page-header/demo/basic.md

@@ -7,8 +7,8 @@ title:
 
 ## zh-CN
 
-标准页头
+标准页头，适合使用在需要简单描述的场景。
 
 ## en-US
 
-Basic Page Header
+Standard header, suitable for use in scenarios that require a brief description.

components/page-header/demo/breadcrumb.md

@@ -7,8 +7,8 @@ title:
 
 ## zh-CN
 
-带面包屑页头
+带面包屑页头，适合层级比较深的页面，让用户可以快速导航。
 
 ## en-US
 
-Use with breadcrumbs
+With breadcrumbs, it is suitable for deeper pages, allowing users to navigate quickly.

components/page-header/demo/breadcrumb.ts

@@ -3,7 +3,7 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'nz-demo-page-header-breadcrumb',
   template: `
-    <nz-page-header nzBackIcon nzTitle="Title">
+    <nz-page-header nzTitle="Title">
       <nz-breadcrumb nz-page-header-breadcrumb>
         <nz-breadcrumb-item>First-level Menu</nz-breadcrumb-item>
         <nz-breadcrumb-item>

components/page-header/demo/content.md

@@ -1,14 +1,14 @@
 ---
 order: 3
 title:
-  zh-CN: 内容
-  en-US: Content
+  zh-CN: 组合示例
+  en-US:  Complete example
 ---
 
 ## zh-CN
 
-你可以使用 `<nz-page-header-content>` 添加内容。
+使用了 PageHeader 提供的所有能力。
 
 ## en-US
 
-You can use `<nz-page-header-content>` to add content.
+Used all the capabilities provided by PageHeader.

components/page-header/demo/content.ts

@@ -3,14 +3,48 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'nz-demo-page-header-content',
   template: `
-    <nz-page-header nzTitle="Page Title">
+    <nz-page-header>
+      <!--breadcrumb-->
       <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>
+
+      <!--avatar-->
+      <nz-avatar nz-page-header-avatar nzSrc="https://avatars0.githubusercontent.com/u/22736418?s=88&v=4"> </nz-avatar>
+
+      <!--title-->
+      <nz-page-header-title>Title</nz-page-header-title>
+
+      <!--subtitle-->
+      <nz-page-header-subtitle>This is a subtitle</nz-page-header-subtitle>
+
+      <!--tags-->
+      <nz-page-header-tags>
+        <nz-tag [nzColor]="'blue'">Running</nz-tag>
+      </nz-page-header-tags>
+
+      <!--extra-->
+      <nz-page-header-extra>
+        <button nz-button>Operation</button>
+        <button nz-button>Operation</button>
+        <button nz-button nzType="primary">Primary</button>
+        <button nz-button nzNoAnimation nz-dropdown [nzDropdownMenu]="menu" style="border: none; padding: 0">
+          <i nz-icon nzType="ellipsis" nzTheme="outline" style="font-size: 20px; vertical-align: top;"></i>
+        </button>
+        <nz-dropdown-menu #menu="nzDropdownMenu">
+          <ul nz-menu>
+            <li nz-menu-item>1st menu item length</li>
+            <li nz-menu-item>2nd menu item length</li>
+            <li nz-menu-item>3rd menu item length</li>
+          </ul>
+        </nz-dropdown-menu>
+      </nz-page-header-extra>
+
+      <!--content-->
       <nz-page-header-content>
         <div class="wrap">
           <div class="content">

components/page-header/demo/module

@@ -1,9 +1,27 @@
 import { NzPageHeaderModule } from 'ng-zorro-antd/page-header';
+import { NzAvatarModule } from 'ng-zorro-antd/avatar';
 import { NzTagModule } from 'ng-zorro-antd/tag';
 import { NzTabsModule } from 'ng-zorro-antd/tabs';
 import { NzButtonModule } from 'ng-zorro-antd/button';
 import { NzBreadCrumbModule } from 'ng-zorro-antd/breadcrumb';
 import { NzDescriptionsModule } from 'ng-zorro-antd/descriptions';
 import { NzTypographyModule } from 'ng-zorro-antd/typography';
+import { NzDropDownModule } from 'ng-zorro-antd/dropdown';
+import { NzIconModule } from 'ng-zorro-antd/icon';
+import { NzStatisticModule } from 'ng-zorro-antd/statistic';
+import { NzGridModule } from 'ng-zorro-antd/grid';
 
-export const moduleList = [ NzPageHeaderModule, NzTagModule, NzTabsModule, NzBreadCrumbModule, NzButtonModule, NzDescriptionsModule, NzTypographyModule ];
+export const moduleList = [
+  NzPageHeaderModule,
+  NzTagModule,
+  NzTabsModule,
+  NzBreadCrumbModule,
+  NzButtonModule,
+  NzDescriptionsModule,
+  NzTypographyModule,
+  NzAvatarModule,
+  NzDropDownModule,
+  NzIconModule,
+  NzStatisticModule,
+  NzGridModule
+];

components/page-header/demo/responsive.md

@@ -0,0 +1,14 @@
+---
+order: 5
+title:
+  zh-CN: 响应式
+  en-US: responsive
+---
+
+## zh-CN
+
+在不同大小的屏幕下，应该有不同的表现
+
+## en-US
+
+Under different screen sizes, there should be different performance

components/page-header/demo/responsive.ts

@@ -0,0 +1,75 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-page-header-responsive',
+  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-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="content">
+          <div class="main">
+            <nz-descriptions [nzColumn]="2">
+              <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>
+          </div>
+          <div class="extra">
+            <div>
+              <nz-statistic nzTitle="Status" nzValue="Pending"></nz-statistic>
+              <nz-statistic nzTitle="Price" [nzValue]="568.08" nzPrefix="$" style="margin: 0 32px"></nz-statistic>
+            </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);
+      }
+      .content {
+        display: flex;
+      }
+      .extra > div {
+        display: flex;
+        width: max-content;
+        justify-content: flex-end;
+      }
+      @media (max-width: 576px) {
+        .content {
+          display: block;
+        }
+
+        .main {
+          width: 100%;
+          margin-bottom: 12px;
+        }
+
+        .extra {
+          width: 100%;
+          margin-left: 0;
+          text-align: left;
+        }
+      }
+    `
+  ]
+})
+export class NzDemoPageHeaderResponsiveComponent {}

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

@@ -36,10 +36,11 @@ import { NzPageHeaderModule } from 'ng-zorro-antd/page-header';
 ### Page header sections
 | Element | Description |
 | ----- | ----------- | ---- | ------------- |
-| `<nz-page-header-title>` | Title section |
-| `<nz-page-header-subtitle>` | Subtitle section, `[nzTitle]` has high priority |
-| `<nz-page-header-content>` | Content section, `[nzSubtitle]` has high priority |
-| `<nz-page-header-footer>` | Footer section |
-| `<nz-page-header-tags>` |  Tags container after the title |
-| `<nz-page-header-extra>` | Operating area, at the end of the line of the title line |
-| `<nz-breadcrumb nz-page-header-breadcrumb>` | Breadcrumb section |
+| `nz-page-header-title` | Title section |
+| `nz-page-header-subtitle` | Subtitle section, `[nzTitle]` has high priority |
+| `nz-page-header-content` | Content section, `[nzSubtitle]` has high priority |
+| `nz-page-header-footer` | Footer section |
+| `nz-page-header-tags` |  Tags container after the title |
+| `nz-page-header-extra` | Operating area, at the end of the line of the title line |
+| `nz-breadcrumb[nz-page-header-breadcrumb]` | Breadcrumb section |
+| `nz-avatar[nz-page-header-avatar]` | Avatar section |

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

@@ -37,11 +37,12 @@ import { NzPageHeaderModule } from 'ng-zorro-antd/page-header';
 ### Page header 组成部分
 | 元素 | 说明 |
 | ----- | ----------- | ---- | ------------- |
-| `<nz-page-header-title>` | title 部分，`[nzTitle]` 优先级更高 |
-| `<nz-page-header-subtitle>` | subtitle 部分，`[nzSubtitle]` 优先级更高 |
-| `<nz-page-header-content>` | 内容部分 |
-| `<nz-page-header-footer>` | 底部部分 |
-| `<nz-page-header-tags>` |  title 旁的 tag 列表容器 |
-| `<nz-page-header-extra>` | title 的行尾操作区部分 |
-| `<nz-breadcrumb nz-page-header-breadcrumb>` | 面包屑部分 |
+| `nz-page-header-title` | title 部分，`[nzTitle]` 优先级更高 |
+| `nz-page-header-subtitle` | subtitle 部分，`[nzSubtitle]` 优先级更高 |
+| `nz-page-header-content` | 内容部分 |
+| `nz-page-header-footer` | 底部部分 |
+| `nz-page-header-tags` |  title 旁的 tag 列表容器 |
+| `nz-page-header-extra` | title 的行尾操作区部分 |
+| `nz-breadcrumb[nz-page-header-breadcrumb]` | 面包屑部分 |
+| `nz-avatar[nz-page-header-avatar]` | 头像部分 |