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

Basic Page Header

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() {
    console.log('onBack');
  }
}
First-level Menu / Second-level Menu / Third-level Menu /
Title

Use with breadcrumbs

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

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

You can use <nz-page-header-content> to add content.

expand codeexpand code
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 {}
TitleThis is a subtitleWarning
Created

Lili Qu

Association421421
Creation Time

2017-01-10

Effective Time

2017-01-10

Remarks

Gonghu Road, Xihu District, Hangzhou, Zhejiang, China

Status

Pending

Price

$ 568.08

Use the action area and customize the child nodes

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-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 {}

API#

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

nz-page-header#

ParamDescriptionTypeDefault value
[nzTitle]title stringstring | TemplateRef<void>-
[nzSubtitle]subTitle stringstring | TemplateRef<void>-
[nzBackIcon]custom back iconstring | TemplateRef<void>-
(nzBack)back icon click eventEventEmitter<void>-

Page header sections#

ElementDescription
<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