NG-ZORROPageHeader
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
Standard header, suitable for use in scenarios that require a brief description.
Loading... 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.
Loading...With breadcrumbs, it is suitable for deeper pages, allowing users to navigate quickly.
Loading...
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.
Quick Start 
Product Info 
Product Doc 
Used all the capabilities provided by PageHeader.
Loading... Created Lili Qu | Association 421421 | Creation Time 2017-01-10 |
Effective Time 2017-10-10 | Remarks Gonghu Road, Xihu District, Hangzhou, Zhejiang, China | |
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.
Loading... Created Lili Qu | Association 421421 |
Creation Time 2017-01-10 | Effective Time 2017-10-10 |
Remarks Gonghu Road, Xihu District, Hangzhou, Zhejiang, China | |
Under different screen sizes, there should be different performance
Loading...API#
<nz-page-header nzTitle="Page Title"></nz-page-header>nz-page-header#
| Param | Description | Type | Default value | Global Config |
|---|---|---|---|---|
[nzGhost] | Make background transparent | boolean | true | ✅ |
[nzTitle] | Title string | string | TemplateRef<void> | - | - |
[nzSubtitle] | SubTitle string | string | TemplateRef<void> | - | - |
[nzBackIcon] | Custom back icon | string | TemplateRef<void> | - | - |
(nzBack) | Back icon click event | EventEmitter<void> | Call Location[back] when the event not subscribed（you need import RouterModule or register Location） | - |
Page header sections#
| Element | Description |
|---|---|
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 |
nz-avatar[nz-page-header-avatar] | Avatar section |