PageHeader页头

页头位于页容器中,页容器顶部,起到了内容概览和引导页级操作的作用。包括由面包屑、标题、页面内容简介、页面级操作等、页面级导航组成。

何时使用#

当需要使用户快速理解当前页是什么以及方便用户使用页面功能时使用,通常也可被用作页面间导航。

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

代码演示

TitleThis is a subtitle

标准页头,适合使用在需要简单描述的场景。

expand codeexpand code
      加载中
    
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

默认 PageHeader 是透明底色的。在某些情况下,PageHeader 需要自己的背景颜色。

expand codeexpand code
      加载中
    
First-level Menu / Second-level Menu / Third-level Menu /
TitleThis is a subtitle

带面包屑页头,适合层级比较深的页面,让用户可以快速导航。

expand codeexpand code
      加载中
    
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

使用了 PageHeader 提供的所有能力。

expand codeexpand code
      加载中
    
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

使用操作区,并自定义子节点,适合使用在需要展示一些复杂的信息,帮助用户快速了解这个页面的信息和操作。

expand codeexpand code
      加载中
    
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

在不同大小的屏幕下,应该有不同的表现

expand codeexpand code
      加载中
    

API#

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

nz-page-header#

参数说明类型默认值全局配置
[nzGhost]使背景色透明booleantrue
[nzTitle]title 文字string | TemplateRef<void>--
[nzSubtitle]subTitle 文字string | TemplateRef<void>--
[nzBackIcon]自定义 back iconstring | TemplateRef<void>--
(nzBack)返回按钮的点击事件EventEmitter<void>未订阅该事件时默认调用 Location[back](需要引入 RouterModule 或者注册 Location)-

Page header 组成部分#

元素说明
nz-page-header-titletitle 部分,[nzTitle] 优先级更高
nz-page-header-subtitlesubtitle 部分,[nzSubtitle] 优先级更高
nz-page-header-content内容部分
nz-page-header-footer底部部分
nz-page-header-tagstitle 旁的 tag 列表容器
nz-page-header-extratitle 的行尾操作区部分
nz-breadcrumb[nz-page-header-breadcrumb]面包屑部分
nz-avatar[nz-page-header-avatar]头像部分