PageHeader

A header with common actions and design elements built in.

When To Use#

PageHeader can be used to highlight the page topic, display important information about the page, and carry the action items related to the current page (including page-level operations, inter-page navigation, etc.) It can also be used as inter-page navigation.

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

Examples

TitleThis is a subtitle
Basic Page Header

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

expand codeexpand code
      Loading...
TitleThis is a subtitle
Created Lili Qu
Association 421421
Creation Time 2017-01-10
Effective Time 2017-10-10
Remarks Gonghu Road, Xihu District, Hangzhou, Zhejiang, China
white background mode

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

expand codeexpand code
      Loading...
First-level Menu / Second-level Menu / Third-level Menu /
TitleThis is a subtitle
Use with breadcrumbs

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

expand codeexpand code
      Loading...
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.

start Quick Start info Product Info doc Product Doc
content
Complete example

Used all the capabilities provided by PageHeader.

expand codeexpand code
      Loading...
TitleThis is a subtitle
Created Lili Qu
Association 421421
Creation Time 2017-01-10
Effective Time 2017-10-10
Remarks Gonghu Road, Xihu District, Hangzhou, Zhejiang, China

TitleThis is a subtitleRunning
Status
Pending
Price
$568.08
Balance
$3345.08
Various forms of PageHeader

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
      Loading...
TitleThis is a subtitle
Created Lili Qu
Association 421421
Creation Time 2017-01-10
Effective Time 2017-10-10
Remarks Gonghu Road, Xihu District, Hangzhou, Zhejiang, China
Status
Pending
Price
$568.08
responsive

Under different screen sizes, there should be different performance

expand codeexpand code
      Loading...

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（you need import RouterModule or register Location）-

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