PageHeader页头

当需要使用户快速理解当前页是什么以及方便用户使用页面功能时使用，通常也可被用作页面间导航。

标准样式

标准页头，适合使用在需要简单描述的场景。

@Component({
  selector: 'nz-demo-page-header-basic',
  template: `
    <nz-page-header class="site-page-header" (nzBack)="onBack()" nzBackIcon nzTitle="Title" nzSubtitle="This is a subtitle">
    </nz-page-header>
  `
})
export class NzDemoPageHeaderBasicComponent {
  onBack(): void {
    console.log('onBack');
  }
}

默认 PageHeader 是透明底色的。在某些情况下，PageHeader 需要自己的背景颜色。

带面包屑页头

带面包屑页头，适合层级比较深的页面，让用户可以快速导航。

import { Component } from '@angular/core';
@Component({
  selector: 'nz-demo-page-header-breadcrumb',
  template: `
    <nz-page-header class="site-page-header" nzTitle="Title" nzSubtitle="This is a subtitle">
      <nz-breadcrumb nz-page-header-breadcrumb>
        <nz-breadcrumb-item>First-level Menu</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>
  `
})
export class NzDemoPageHeaderBreadcrumbComponent {}

使用了 PageHeader 提供的所有能力。

多种形态的 PageHeader

使用操作区，并自定义子节点，适合使用在需要展示一些复杂的信息，帮助用户快速了解这个页面的信息和操作。

import { Component } from '@angular/core';
  selector: 'nz-demo-page-header-actions',
  template: `
    <nz-page-header class="site-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 nzSize="small" [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>
            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="blue">Runing</nz-tag>
      </nz-page-header-tags>
      <nz-page-header-extra>
        <button nz-button>Operation</button>
        <button nz-button>Operation</button>
      </nz-page-header-extra>
      <nz-page-header-content>
        <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>
  `
})

在不同大小的屏幕下，应该有不同的表现

<nz-page-header nzTitle="Page Title"></nz-page-header>

Page header 组成部分