PageHeader

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.

Import this Component Individually#

You can get more detail here.

import { NzPageHeaderModule } from 'ng-zorro-antd/page-header';

Examples

TitleThis is a subtitle

Standard header, suitable for use in scenarios that require a brief description.

expand codeexpand code
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(): void {
    console.log('onBack');
  }
}
TitleThis is a subtitle
CreatedLili QuAssociation421421Creation Time2017-01-10
Effective Time2017-10-10Remarks Gonghu Road, Xihu District, Hangzhou, Zhejiang, China

The default PageHeader is a transparent background. In some cases, PageHeader needs its own background color.

expand codeexpand code
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 {}
First-level Menu / Second-level Menu / Third-level Menu /
Title

With breadcrumbs, it is suitable for deeper pages, allowing users to navigate quickly.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-page-header-breadcrumb',
  template: `
    <nz-page-header 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 {}
First-level Menu / Second-level Menu / Third-level Menu /
TitleThis is a subtitleRunning

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.

content

Used all the capabilities provided by PageHeader.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-page-header-content',
  template: `
    <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">
            <div class="content">
              <p nz-paragraph>
                Ant Design interprets the color system into two levels: a system-level color system and a product-level
                color system.
              </p>
              <p nz-paragraph>
                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 {}
TitleThis is a subtitle
CreatedLili QuAssociation421421Creation Time2017-01-10
Effective Time2017-10-10Remarks Gonghu Road, Xihu District, Hangzhou, Zhejiang, China

TitleThis is a subtitleRuning
Status
Pending
Price
$568.08
Balance
$3345.08

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.

expand codeexpand code
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="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>
        <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>
  `,
  styles: [
    `
      nz-page-header {
        border: 1px solid rgb(235, 237, 240);
      }
    `
  ]
})
export class NzDemoPageHeaderActionsComponent {}
TitleThis is a subtitle
CreatedLili QuAssociation421421
Creation Time2017-01-10Effective Time2017-10-10
Remarks Gonghu Road, Xihu District, Hangzhou, Zhejiang, China
Status
Pending
Price
$568.08

Under different screen sizes, there should be different performance

expand codeexpand code
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 {}

API#

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

nz-page-header#

ParamDescriptionTypeDefault valueGlobal Config
[nzGhost]Make background transparentbooleantrue
[nzTitle]Title stringstring | TemplateRef<void>--
[nzSubtitle]SubTitle stringstring | TemplateRef<void>--
[nzBackIcon]Custom back iconstring | TemplateRef<void>--
(nzBack)Back icon click eventEventEmitter<void>Call Location[back] when the event not subscribed-

Page header sections#

ElementDescription
nz-page-header-titleTitle section
nz-page-header-subtitleSubtitle section, [nzTitle] has high priority
nz-page-header-contentContent section, [nzSubtitle] has high priority
nz-page-header-footerFooter section
nz-page-header-tagsTags container after the title
nz-page-header-extraOperating 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