PageHeader页头

页头用来声明页面的主题，包含了用户所关注的最重要的信息。

何时使用

当需要用户快速理解当前页面是什么以及它的功能时使用。

代码演示

PageHeader页头 - 图1

标准样式

标准页头

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-page-header-basic',
  5.   template: `
  6.     <nz-page-header (nzBack)="onBack()" nzBackIcon nzTitle="Title" nzSubtitle="This is a subtitle"> </nz-page-header>
  7.   `,
  8.   styles: [
  9.     `
  10.       nz-page-header {
  11.         border: 1px solid rgb(235, 237, 240);
  12.       }
  13.     `
  14.   ]
  15. })
  16. export class NzDemoPageHeaderBasicComponent {
  17.   onBack() {
  18.     console.log('onBack');
  19.   }
  20. }

PageHeader页头 - 图2

带面包屑页头

带面包屑页头

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-page-header-breadcrumb',
  5.   template: `
  6.     <nz-page-header nzBackIcon nzTitle="Title">
  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.   styles: [
  17.     `
  18.       nz-page-header {
  19.         border: 1px solid rgb(235, 237, 240);
  20.       }
  21.     `
  22.   ]
  23. })
  24. export class NzDemoPageHeaderBreadcrumbComponent {}

PageHeader页头 - 图3

内容

你可以使用 <nz-page-header-content> 添加内容。

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-page-header-content',
  5.   template: `
  6.     <nz-page-header nzTitle="Page Title">
  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-content>
  15.         <div class="wrap">
  16.           <div class="content">
  17.             <div class="content">
  18.               <p>
  19.                 Ant Design interprets the color system into two levels: a system-level color system and a product-level
  20.                 color system.
  21.               </p>
  22.               <p>
  23.                 Ant Design's design team preferred to design with the HSB color model, which makes it easier for
  24.                 designers to have a clear psychological expectation of color when adjusting colors, as well as
  25.                 facilitate communication in teams.
  26.               </p>
  27.               <p class="content-link">
  28.                 <a>
  29.                   <img src="https://gw.alipayobjects.com/zos/rmsportal/MjEImQtenlyueSmVEfUD.svg" alt="start" />Quick
  30.                   Start
  31.                 </a>
  32.                 <a>
  33.                   <img src="https://gw.alipayobjects.com/zos/rmsportal/NbuDUAuBlIApFuDvWiND.svg" alt="info" />Product
  34.                   Info
  35.                 </a>
  36.                 <a>
  37.                   <img src="https://gw.alipayobjects.com/zos/rmsportal/ohOEPSYdDTNnyMbGuyLb.svg" alt="doc" />Product Doc
  38.                 </a>
  39.               </p>
  40.             </div>
  41.           </div>
  42.           <div class="extra-content">
  43.             <img
  44.               src="https://gw.alipayobjects.com/mdn/mpaas_user/afts/img/A*KsfVQbuLRlYAAAAAAAAAAABjAQAAAQ/original"
  45.               alt="content"
  46.             />
  47.           </div>
  48.         </div>
  49.       </nz-page-header-content>
  50.     </nz-page-header>
  51.   `,
  52.   styles: [
  53.     `
  54.       nz-page-header {
  55.         border: 1px solid rgb(235, 237, 240);
  56.       }
  58.       .wrap {
  59.         display: flex;
  60.       }
  62.       .content {
  63.         flex: 1;
  64.       }
  66.       .content p {
  67.         margin-bottom: 8px;
  68.       }
  70.       .content-link {
  71.         padding-top: 16px;
  72.       }
  74.       .content-link a {
  75.         display: inline-block;
  76.         vertical-align: text-top;
  77.         margin-right: 32px;
  78.       }
  80.       .content-link a img {
  81.         margin-right: 8px;
  82.       }
  84.       .extra-content {
  85.         min-width: 240px;
  86.         text-align: right;
  87.       }
  88.     `
  89.   ]
  90. })
  91. export class NzDemoPageHeaderContentComponent {}

PageHeader页头 - 图4

复杂的例子

使用操作区，并自定义子节点

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-page-header-actions',
  5.   template: `
  6.     <nz-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-tags>
  10.         <nz-tag [nzColor]="'red'">Warning</nz-tag>
  11.       </nz-page-header-tags>
  12.       <nz-page-header-extra>
  13.         <button nz-button>Operation</button>
  14.         <button nz-button>Operation</button>
  15.         <button nz-button nzType="primary">Primary</button>
  16.       </nz-page-header-extra>
  17.       <nz-page-header-content>
  18.         <div class="wrap">
  19.           <div nz-row class="content padding">
  20.             <div nz-col nzSpan="12">
  21.               <div class="description">
  22.                 <span class="term">Created</span>
  23.                 <p class="detail">Lili Qu</p>
  24.               </div>
  25.             </div>
  26.             <div nz-col nzSpan="12">
  27.               <div class="description">
  28.                 <span class="term">Association</span>
  29.                 <a>421421</a>
  30.               </div>
  31.             </div>
  32.             <div nz-col nzSpan="12">
  33.               <div class="description">
  34.                 <span class="term">Creation Time</span>
  35.                 <p class="detail">2017-01-10</p>
  36.               </div>
  37.             </div>
  38.             <div nz-col nzSpan="12">
  39.               <div class="description">
  40.                 <span class="term">Effective Time</span>
  41.                 <p class="detail">2017-01-10</p>
  42.               </div>
  43.             </div>
  44.             <div nz-col nzSpan="12">
  45.               <div class="description">
  46.                 <span class="term">Remarks</span>
  47.                 <p class="detail">Gonghu Road, Xihu District, Hangzhou, Zhejiang, China</p>
  48.               </div>
  49.             </div>
  50.           </div>
  51.           <div nz-row class="extra-content">
  52.             <div nz-col nzSpan="12">
  53.               <span class="label">Status</span>
  54.               <p class="detail">Pending</p>
  55.             </div>
  56.             <div nz-col nzSpan="12">
  57.               <span class="label"> Price</span>
  58.               <p class="detail">$ 568.08</p>
  59.             </div>
  60.           </div>
  61.         </div>
  62.       </nz-page-header-content>
  63.       <nz-page-header-footer>
  64.         <nz-tabset [nzSelectedIndex]="1">
  65.           <nz-tab nzTitle="Details"></nz-tab>
  66.           <nz-tab nzTitle="Rule"></nz-tab>
  67.         </nz-tabset>
  68.       </nz-page-header-footer>
  69.     </nz-page-header>
  70.   `,
  71.   styles: [
  72.     `
  73.       nz-page-header {
  74.         border: 1px solid rgb(235, 237, 240);
  75.       }
  77.       .wrap {
  78.         display: flex;
  79.       }
  81.       .content {
  82.         flex: 1;
  83.       }
  85.       .content.padding {
  86.         padding-left: 40px;
  87.       }
  89.       .content p {
  90.         margin-bottom: 8px;
  91.       }
  93.       .content .description {
  94.         display: table;
  95.       }
  97.       .description .term {
  98.         display: table-cell;
  99.         margin-right: 8px;
  100.         padding-bottom: 8px;
  101.         white-space: nowrap;
  102.         line-height: 20px;
  103.       }
  105.       .description .term:after {
  106.         position: relative;
  107.         top: -0.5px;
  108.         margin: 0 8px 0 2px;
  109.         content: ':';
  110.       }
  112.       .description .detail {
  113.         display: table-cell;
  114.         padding-bottom: 8px;
  115.         width: 100%;
  116.         line-height: 20px;
  117.       }
  119.       .extra-content {
  120.         min-width: 240px;
  121.         text-align: right;
  122.       }
  124.       .extra-content .label {
  125.         font-size: 14px;
  126.         color: rgba(0, 0, 0, 0.45);
  127.         line-height: 22px;
  128.       }
  130.       .extra-content .detail {
  131.         font-size: 20px;
  132.         color: rgba(0, 0, 0, 0.85);
  133.         line-height: 28px;
  134.       }
  135.     `
  136.   ]
  137. })
  138. export class NzDemoPageHeaderActionsComponent {}

API

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

单独引入此组件

想要了解更多关于单独引入组件的内容，可以在快速上手页面进行查看。

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

nz-page-headercomponent

参数说明类型默认值
[nzTitle]title 文字string｜TemplateRef<void>-
[nzSubTitle]subTitle 文字string｜TemplateRef<void>-
[nzBackIcon]自定义 back iconstring｜TemplateRef<void>-
[nzBack]返回按钮的点击事件EventEmitter<void>-

Page header 组成部分

元素说明
<nz-page-header-title>title 部分，[nzTitle] 优先级更高
<nz-page-header-subtitle>subtitle 部分，[nzSubTitle] 优先级更高
<nz-page-header-content>内容部分
<nz-page-header-footer>底部部分
<nz-page-header-tags>title 旁的 tag 列表容器
<nz-page-header-extra>title 的行尾操作区部分
<nz-breadcrumb nz-page-header-breadcrumb>面包屑部分