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

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

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

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.

content

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

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