PageHeader页头

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

何时使用

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

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

代码演示

PageHeader页头 - 图1

标准样式

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

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-page-header-basic',
  5.   template: `
  6.     <nz-page-header class="site-page-header" (nzBack)="onBack()" nzBackIcon nzTitle="Title" nzSubtitle="This is a subtitle">
  7.     </nz-page-header>
  8.   `
  9. })
  10. export class NzDemoPageHeaderBasicComponent {
  11.   onBack(): void {
  12.     console.log('onBack');
  13.   }
  14. }

PageHeader页头 - 图2

白底模式

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

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-page-header-ghost',
  5.   template: `
  6.     <div class="site-page-header-ghost-wrapper">
  7.       <nz-page-header nzBackIcon [nzGhost]="false">
  8.         <nz-page-header-title>Title</nz-page-header-title>
  9.         <nz-page-header-subtitle>This is a subtitle</nz-page-header-subtitle>
  10.         <nz-page-header-extra>
  11.           <button nz-button>Operation</button>
  12.           <button nz-button>Operation</button>
  13.           <button nz-button nzType="primary">Primary</button>
  14.         </nz-page-header-extra>
  15.         <nz-page-header-content>
  16.           <nz-descriptions nzSize="small" [nzColumn]="3">
  17.             <nz-descriptions-item nzTitle="Created" [nzSpan]="1">Lili Qu</nz-descriptions-item>
  18.             <nz-descriptions-item nzTitle="Association" [nzSpan]="1"><a>421421</a></nz-descriptions-item>
  19.             <nz-descriptions-item nzTitle="Creation Time" [nzSpan]="1">2017-01-10</nz-descriptions-item>
  20.             <nz-descriptions-item nzTitle="Effective Time" [nzSpan]="1">2017-10-10</nz-descriptions-item>
  21.             <nz-descriptions-item nzTitle="Remarks" [nzSpan]="2">
  22.               Gonghu Road, Xihu District, Hangzhou, Zhejiang, China
  23.             </nz-descriptions-item>
  24.           </nz-descriptions>
  25.         </nz-page-header-content>
  26.       </nz-page-header>
  27.     </div>
  28.   `
  29. })
  30. export class NzDemoPageHeaderGhostComponent {}

PageHeader页头 - 图3

带面包屑页头

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

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-page-header-breadcrumb',
  5.   template: `
  6.     <nz-page-header class="site-page-header" nzTitle="Title" nzSubtitle="This is a subtitle">
  7.       <nz-breadcrumb nz-page-header-breadcrumb>
  8.         <nz-breadcrumb-item>First-level Menu</nz-breadcrumb-item>
  9.         <nz-breadcrumb-item>
  10.           <a>Second-level Menu</a>
  11.         </nz-breadcrumb-item>
  12.         <nz-breadcrumb-item>Third-level Menu</nz-breadcrumb-item>
  13.       </nz-breadcrumb>
  14.     </nz-page-header>
  15.   `
  16. })
  17. export class NzDemoPageHeaderBreadcrumbComponent {}

PageHeader页头 - 图4

组合示例

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

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-page-header-content',
  5.   template: `
  6.     <nz-page-header class="site-page-header">
  7.       <!--breadcrumb-->
  8.       <nz-breadcrumb nz-page-header-breadcrumb>
  9.         <nz-breadcrumb-item>First-level Menu</nz-breadcrumb-item>
  10.         <nz-breadcrumb-item>
  11.           <a>Second-level Menu</a>
  12.         </nz-breadcrumb-item>
  13.         <nz-breadcrumb-item>Third-level Menu</nz-breadcrumb-item>
  14.       </nz-breadcrumb>
  16.       <!--avatar-->
  17.       <nz-avatar nz-page-header-avatar nzSrc="https://avatars0.githubusercontent.com/u/22736418?s=88&v=4"> </nz-avatar>
  19.       <!--title-->
  20.       <nz-page-header-title>Title</nz-page-header-title>
  22.       <!--subtitle-->
  23.       <nz-page-header-subtitle>This is a subtitle</nz-page-header-subtitle>
  25.       <!--tags-->
  26.       <nz-page-header-tags>
  27.         <nz-tag [nzColor]="'blue'">Running</nz-tag>
  28.       </nz-page-header-tags>
  30.       <!--extra-->
  31.       <nz-page-header-extra>
  32.         <button nz-button>Operation</button>
  33.         <button nz-button>Operation</button>
  34.         <button nz-button nzType="primary">Primary</button>
  35.         <button nz-button nzNoAnimation nz-dropdown [nzDropdownMenu]="menu" style="border: none; padding: 0">
  36.           <i nz-icon nzType="ellipsis" nzTheme="outline" style="font-size: 20px; vertical-align: top;"></i>
  37.         </button>
  38.         <nz-dropdown-menu #menu="nzDropdownMenu">
  39.           <ul nz-menu>
  40.             <li nz-menu-item>1st menu item length</li>
  41.             <li nz-menu-item>2nd menu item length</li>
  42.             <li nz-menu-item>3rd menu item length</li>
  43.           </ul>
  44.         </nz-dropdown-menu>
  45.       </nz-page-header-extra>
  47.       <!--content-->
  48.       <nz-page-header-content>
  49.         <div nz-row>
  50.           <div class="content">
  51.             <p nz-paragraph>
  52.               Ant Design interprets the color system into two levels: a system-level color system and a product-level color system.
  53.             </p>
  54.             <p nz-paragraph>
  55.               Ant Design's design team preferred to design with the HSB color model, which makes it easier for designers to have a clear
  56.               psychological expectation of color when adjusting colors, as well as facilitate communication in teams.
  57.             </p>
  58.             <div class="content-link">
  59.               <a> <img src="https://gw.alipayobjects.com/zos/rmsportal/MjEImQtenlyueSmVEfUD.svg" alt="start" />Quick Start </a>
  60.               <a> <img src="https://gw.alipayobjects.com/zos/rmsportal/NbuDUAuBlIApFuDvWiND.svg" alt="info" />Product Info </a>
  61.               <a> <img src="https://gw.alipayobjects.com/zos/rmsportal/ohOEPSYdDTNnyMbGuyLb.svg" alt="doc" />Product Doc </a>
  62.             </div>
  63.           </div>
  64.           <div class="content-image">
  65.             <img src="https://gw.alipayobjects.com/zos/antfincdn/K%24NnlsB%26hz/pageHeader.svg" alt="content" />
  66.           </div>
  67.         </div>
  68.       </nz-page-header-content>
  69.     </nz-page-header>
  70.   `,
  71.   styles: [
  72.     `
  73.       .content {
  74.         flex: 1;
  75.       }
  77.       .content p {
  78.         margin-bottom: 1em;
  79.       }
  81.       .content-link a {
  82.         margin-right: 16px;
  83.       }
  85.       .content-link a img {
  86.         margin-right: 8px;
  87.       }
  89.       .content-image {
  90.         margin: 0 0 0 60px;
  91.         display: flex;
  92.         align-items: center;
  93.       }
  95.       .content-image img {
  96.         width: 100%;
  97.       }
  99.       @media (max-width: 768px) {
  100.         .content-image {
  101.           flex: 100%;
  102.           margin: 24px 0 0;
  103.         }
  104.       }
  105.     `
  106.   ]
  107. })
  108. export class NzDemoPageHeaderContentComponent {}

PageHeader页头 - 图5

多种形态的 PageHeader

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

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-page-header-actions',
  5.   template: `
  6.     <nz-page-header class="site-page-header" nzBackIcon>
  7.       <nz-page-header-title>Title</nz-page-header-title>
  8.       <nz-page-header-subtitle>This is a subtitle</nz-page-header-subtitle>
  9.       <nz-page-header-extra>
  10.         <button nz-button>Operation</button>
  11.         <button nz-button>Operation</button>
  12.         <button nz-button nzType="primary">Primary</button>
  13.       </nz-page-header-extra>
  14.       <nz-page-header-content>
  15.         <nz-descriptions nzSize="small" [nzColumn]="3">
  16.           <nz-descriptions-item nzTitle="Created" [nzSpan]="1">Lili Qu</nz-descriptions-item>
  17.           <nz-descriptions-item nzTitle="Association" [nzSpan]="1"><a>421421</a></nz-descriptions-item>
  18.           <nz-descriptions-item nzTitle="Creation Time" [nzSpan]="1">2017-01-10</nz-descriptions-item>
  19.           <nz-descriptions-item nzTitle="Effective Time" [nzSpan]="1">2017-10-10</nz-descriptions-item>
  20.           <nz-descriptions-item nzTitle="Remarks" [nzSpan]="2">
  21.             Gonghu Road, Xihu District, Hangzhou, Zhejiang, China
  22.           </nz-descriptions-item>
  23.         </nz-descriptions>
  24.       </nz-page-header-content>
  25.     </nz-page-header>
  26.     <br />
  27.     <nz-page-header nzBackIcon>
  28.       <nz-page-header-title>Title</nz-page-header-title>
  29.       <nz-page-header-subtitle>This is a subtitle</nz-page-header-subtitle>
  30.       <nz-page-header-tags>
  31.         <nz-tag nzColor="blue">Runing</nz-tag>
  32.       </nz-page-header-tags>
  33.       <nz-page-header-extra>
  34.         <button nz-button>Operation</button>
  35.         <button nz-button>Operation</button>
  36.         <button nz-button nzType="primary">Primary</button>
  37.       </nz-page-header-extra>
  38.       <nz-page-header-content>
  39.         <nz-row nzType="flex">
  40.           <nz-statistic nzTitle="Status" nzValue="Pending"></nz-statistic>
  41.           <nz-statistic nzTitle="Price" [nzValue]="568.08" nzPrefix="$" style="margin: 0 32px"></nz-statistic>
  42.           <nz-statistic nzTitle="Balance" [nzValue]="3345.08" nzPrefix="$"></nz-statistic>
  43.         </nz-row>
  44.       </nz-page-header-content>
  45.     </nz-page-header>
  46.   `
  47. })
  48. export class NzDemoPageHeaderActionsComponent {}

PageHeader页头 - 图6

响应式

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

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-page-header-responsive',
  5.   template: `
  6.     <nz-page-header class="site-page-header" nzBackIcon>
  7.       <nz-page-header-title>Title</nz-page-header-title>
  8.       <nz-page-header-subtitle>This is a subtitle</nz-page-header-subtitle>
  9.       <nz-page-header-extra>
  10.         <button nz-button>Operation</button>
  11.         <button nz-button>Operation</button>
  12.         <button nz-button nzType="primary">Primary</button>
  13.       </nz-page-header-extra>
  14.       <nz-page-header-content>
  15.         <div class="content">
  16.           <div class="main">
  17.             <nz-descriptions nzSize="small" [nzColumn]="2">
  18.               <nz-descriptions-item nzTitle="Created" [nzSpan]="1">Lili Qu</nz-descriptions-item>
  19.               <nz-descriptions-item nzTitle="Association" [nzSpan]="1"><a>421421</a></nz-descriptions-item>
  20.               <nz-descriptions-item nzTitle="Creation Time" [nzSpan]="1">2017-01-10</nz-descriptions-item>
  21.               <nz-descriptions-item nzTitle="Effective Time" [nzSpan]="1">2017-10-10</nz-descriptions-item>
  22.               <nz-descriptions-item nzTitle="Remarks" [nzSpan]="2">
  23.                 Gonghu Road, Xihu District, Hangzhou, Zhejiang, China
  24.               </nz-descriptions-item>
  25.             </nz-descriptions>
  26.           </div>
  27.           <div class="extra">
  28.             <div>
  29.               <nz-statistic nzTitle="Status" nzValue="Pending"></nz-statistic>
  30.               <nz-statistic nzTitle="Price" [nzValue]="568.08" nzPrefix="$" style="margin: 0 32px"></nz-statistic>
  31.             </div>
  32.           </div>
  33.         </div>
  34.       </nz-page-header-content>
  35.       <nz-page-header-footer>
  36.         <nz-tabset [nzSelectedIndex]="1">
  37.           <nz-tab nzTitle="Details"></nz-tab>
  38.           <nz-tab nzTitle="Rule"></nz-tab>
  39.         </nz-tabset>
  40.       </nz-page-header-footer>
  41.     </nz-page-header>
  42.   `,
  43.   styles: [
  44.     `
  45.       .content {
  46.         display: flex;
  47.       }
  48.       .extra > div {
  49.         display: flex;
  50.         width: max-content;
  51.         justify-content: flex-end;
  52.       }
  53.       @media (max-width: 576px) {
  54.         .content {
  55.           display: block;
  56.         }
  58.         .main {
  59.           width: 100%;
  60.           margin-bottom: 12px;
  61.         }
  63.         .extra {
  64.           width: 100%;
  65.           margin-left: 0;
  66.           text-align: left;
  67.         }
  68.       }
  69.     `
  70.   ]
  71. })
  72. export class NzDemoPageHeaderResponsiveComponent {}

API

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

nz-page-headercomponent

参数说明类型默认值全局配置
[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]头像部分