PageHeader页头

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

何时使用#

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

单独引入此组件#

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

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

代码演示

TitleThis is a subtitle

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

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-page-header-basic',
  template: `
    <nz-page-header (nzBack)="onBack()" nzBackIcon nzTitle="Title" nzSubtitle="This is a subtitle"> </nz-page-header>
  `,
  styles: [
    `
      nz-page-header {
        border: 1px solid rgb(235, 237, 240);
      }
    `
  ]
})
export class NzDemoPageHeaderBasicComponent {
  onBack(): void {
    console.log('onBack');
  }
}
TitleThis is a subtitle
CreatedLili QuAssociation421421Creation Time2017-01-10
Effective Time2017-10-10Remarks Gonghu Road, Xihu District, Hangzhou, Zhejiang, China

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

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-page-header-ghost',
  template: `
    <div class="wrap">
      <nz-page-header nzBackIcon [nzGhost]="false">
        <nz-page-header-title>Title</nz-page-header-title>
        <nz-page-header-subtitle>This is a subtitle</nz-page-header-subtitle>
        <nz-page-header-extra>
          <button nz-button>Operation</button>
          <button nz-button>Operation</button>
          <button nz-button nzType="primary">Primary</button>
        </nz-page-header-extra>
        <nz-page-header-content>
          <nz-descriptions [nzColumn]="3">
            <nz-descriptions-item nzTitle="Created" [nzSpan]="1">Lili Qu</nz-descriptions-item>
            <nz-descriptions-item nzTitle="Association" [nzSpan]="1"><a>421421</a></nz-descriptions-item>
            <nz-descriptions-item nzTitle="Creation Time" [nzSpan]="1">2017-01-10</nz-descriptions-item>
            <nz-descriptions-item nzTitle="Effective Time" [nzSpan]="1">2017-10-10</nz-descriptions-item>
            <nz-descriptions-item nzTitle="Remarks" [nzSpan]="2">
              Gonghu Road, Xihu District, Hangzhou, Zhejiang, China
            </nz-descriptions-item>
          </nz-descriptions>
        </nz-page-header-content>
      </nz-page-header>
    </div>
  `,
  styles: [
    `
      .wrap {
        background-color: #f5f5f5;
        padding: 24px;
      }
    `
  ]
})
export class NzDemoPageHeaderGhostComponent {}
First-level Menu / Second-level Menu / Third-level Menu /
Title

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

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-page-header-breadcrumb',
  template: `
    <nz-page-header nzTitle="Title">
      <nz-breadcrumb nz-page-header-breadcrumb>
        <nz-breadcrumb-item>First-level Menu</nz-breadcrumb-item>
        <nz-breadcrumb-item>
          <a>Second-level Menu</a>
        </nz-breadcrumb-item>
        <nz-breadcrumb-item>Third-level Menu</nz-breadcrumb-item>
      </nz-breadcrumb>
    </nz-page-header>
  `,
  styles: [
    `
      nz-page-header {
        border: 1px solid rgb(235, 237, 240);
      }
    `
  ]
})
export class NzDemoPageHeaderBreadcrumbComponent {}
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
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-page-header-content',
  template: `
    <nz-page-header>
      <!--breadcrumb-->
      <nz-breadcrumb nz-page-header-breadcrumb>
        <nz-breadcrumb-item>First-level Menu</nz-breadcrumb-item>
        <nz-breadcrumb-item>
          <a>Second-level Menu</a>
        </nz-breadcrumb-item>
        <nz-breadcrumb-item>Third-level Menu</nz-breadcrumb-item>
      </nz-breadcrumb>

      <!--avatar-->
      <nz-avatar nz-page-header-avatar nzSrc="https://avatars0.githubusercontent.com/u/22736418?s=88&v=4"> </nz-avatar>

      <!--title-->
      <nz-page-header-title>Title</nz-page-header-title>

      <!--subtitle-->
      <nz-page-header-subtitle>This is a subtitle</nz-page-header-subtitle>

      <!--tags-->
      <nz-page-header-tags>
        <nz-tag [nzColor]="'blue'">Running</nz-tag>
      </nz-page-header-tags>

      <!--extra-->
      <nz-page-header-extra>
        <button nz-button>Operation</button>
        <button nz-button>Operation</button>
        <button nz-button nzType="primary">Primary</button>
        <button nz-button nzNoAnimation nz-dropdown [nzDropdownMenu]="menu" style="border: none; padding: 0">
          <i nz-icon nzType="ellipsis" nzTheme="outline" style="font-size: 20px; vertical-align: top;"></i>
        </button>
        <nz-dropdown-menu #menu="nzDropdownMenu">
          <ul nz-menu>
            <li nz-menu-item>1st menu item length</li>
            <li nz-menu-item>2nd menu item length</li>
            <li nz-menu-item>3rd menu item length</li>
          </ul>
        </nz-dropdown-menu>
      </nz-page-header-extra>

      <!--content-->
      <nz-page-header-content>
        <div class="wrap">
          <div class="content">
            <div class="content">
              <p nz-paragraph>
                Ant Design interprets the color system into two levels: a system-level color system and a product-level
                color system.
              </p>
              <p nz-paragraph>
                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.
              </p>
              <p class="content-link">
                <a>
                  <img src="https://gw.alipayobjects.com/zos/rmsportal/MjEImQtenlyueSmVEfUD.svg" alt="start" />Quick
                  Start
                </a>
                <a>
                  <img src="https://gw.alipayobjects.com/zos/rmsportal/NbuDUAuBlIApFuDvWiND.svg" alt="info" />Product
                  Info
                </a>
                <a>
                  <img src="https://gw.alipayobjects.com/zos/rmsportal/ohOEPSYdDTNnyMbGuyLb.svg" alt="doc" />Product Doc
                </a>
              </p>
            </div>
          </div>
          <div class="extra-content">
            <img
              src="https://gw.alipayobjects.com/mdn/mpaas_user/afts/img/A*KsfVQbuLRlYAAAAAAAAAAABjAQAAAQ/original"
              alt="content"
            />
          </div>
        </div>
      </nz-page-header-content>
    </nz-page-header>
  `,
  styles: [
    `
      nz-page-header {
        border: 1px solid rgb(235, 237, 240);
      }

      .wrap {
        display: flex;
      }

      .content {
        flex: 1;
      }

      .content p {
        margin-bottom: 8px;
      }

      .content-link {
        padding-top: 16px;
      }

      .content-link a {
        display: inline-block;
        vertical-align: text-top;
        margin-right: 32px;
      }

      .content-link a img {
        margin-right: 8px;
      }

      .extra-content {
        min-width: 240px;
        text-align: right;
      }
    `
  ]
})
export class NzDemoPageHeaderContentComponent {}
TitleThis is a subtitle
CreatedLili QuAssociation421421Creation Time2017-01-10
Effective Time2017-10-10Remarks Gonghu Road, Xihu District, Hangzhou, Zhejiang, China

TitleThis is a subtitleRuning
Status
Pending
Price
$568.08
Balance
$3345.08

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

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-page-header-actions',
  template: `
    <nz-page-header nzBackIcon>
      <nz-page-header-title>Title</nz-page-header-title>
      <nz-page-header-subtitle>This is a subtitle</nz-page-header-subtitle>
      <nz-page-header-extra>
        <button nz-button>Operation</button>
        <button nz-button>Operation</button>
        <button nz-button nzType="primary">Primary</button>
      </nz-page-header-extra>
      <nz-page-header-content>
        <nz-descriptions [nzColumn]="3">
          <nz-descriptions-item nzTitle="Created" [nzSpan]="1">Lili Qu</nz-descriptions-item>
          <nz-descriptions-item nzTitle="Association" [nzSpan]="1"><a>421421</a></nz-descriptions-item>
          <nz-descriptions-item nzTitle="Creation Time" [nzSpan]="1">2017-01-10</nz-descriptions-item>
          <nz-descriptions-item nzTitle="Effective Time" [nzSpan]="1">2017-10-10</nz-descriptions-item>
          <nz-descriptions-item nzTitle="Remarks" [nzSpan]="2">
            Gonghu Road, Xihu District, Hangzhou, Zhejiang, China
          </nz-descriptions-item>
        </nz-descriptions>
      </nz-page-header-content>
    </nz-page-header>
    <br />
    <nz-page-header nzBackIcon>
      <nz-page-header-title>Title</nz-page-header-title>
      <nz-page-header-subtitle>This is a subtitle</nz-page-header-subtitle>
      <nz-page-header-tags>
        <nz-tag nzColor="blue">Runing</nz-tag>
      </nz-page-header-tags>
      <nz-page-header-extra>
        <button nz-button>Operation</button>
        <button nz-button>Operation</button>
        <button nz-button nzType="primary">Primary</button>
      </nz-page-header-extra>
      <nz-page-header-content>
        <nz-row nzType="flex">
          <nz-statistic nzTitle="Status" nzValue="Pending"></nz-statistic>
          <nz-statistic nzTitle="Price" [nzValue]="568.08" nzPrefix="$" style="margin: 0 32px"></nz-statistic>
          <nz-statistic nzTitle="Balance" [nzValue]="3345.08" nzPrefix="$"></nz-statistic>
        </nz-row>
      </nz-page-header-content>
    </nz-page-header>
  `,
  styles: [
    `
      nz-page-header {
        border: 1px solid rgb(235, 237, 240);
      }
    `
  ]
})
export class NzDemoPageHeaderActionsComponent {}
TitleThis is a subtitle
CreatedLili QuAssociation421421
Creation Time2017-01-10Effective Time2017-10-10
Remarks Gonghu Road, Xihu District, Hangzhou, Zhejiang, China
Status
Pending
Price
$568.08

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

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-page-header-responsive',
  template: `
    <nz-page-header nzBackIcon>
      <nz-page-header-title>Title</nz-page-header-title>
      <nz-page-header-subtitle>This is a subtitle</nz-page-header-subtitle>
      <nz-page-header-extra>
        <button nz-button>Operation</button>
        <button nz-button>Operation</button>
        <button nz-button nzType="primary">Primary</button>
      </nz-page-header-extra>
      <nz-page-header-content>
        <div class="content">
          <div class="main">
            <nz-descriptions [nzColumn]="2">
              <nz-descriptions-item nzTitle="Created" [nzSpan]="1">Lili Qu</nz-descriptions-item>
              <nz-descriptions-item nzTitle="Association" [nzSpan]="1"><a>421421</a></nz-descriptions-item>
              <nz-descriptions-item nzTitle="Creation Time" [nzSpan]="1">2017-01-10</nz-descriptions-item>
              <nz-descriptions-item nzTitle="Effective Time" [nzSpan]="1">2017-10-10</nz-descriptions-item>
              <nz-descriptions-item nzTitle="Remarks" [nzSpan]="2">
                Gonghu Road, Xihu District, Hangzhou, Zhejiang, China
              </nz-descriptions-item>
            </nz-descriptions>
          </div>
          <div class="extra">
            <div>
              <nz-statistic nzTitle="Status" nzValue="Pending"></nz-statistic>
              <nz-statistic nzTitle="Price" [nzValue]="568.08" nzPrefix="$" style="margin: 0 32px"></nz-statistic>
            </div>
          </div>
        </div>
      </nz-page-header-content>
      <nz-page-header-footer>
        <nz-tabset [nzSelectedIndex]="1">
          <nz-tab nzTitle="Details"></nz-tab>
          <nz-tab nzTitle="Rule"></nz-tab>
        </nz-tabset>
      </nz-page-header-footer>
    </nz-page-header>
  `,
  styles: [
    `
      nz-page-header {
        border: 1px solid rgb(235, 237, 240);
      }
      .content {
        display: flex;
      }
      .extra > div {
        display: flex;
        width: max-content;
        justify-content: flex-end;
      }
      @media (max-width: 576px) {
        .content {
          display: block;
        }

        .main {
          width: 100%;
          margin-bottom: 12px;
        }

        .extra {
          width: 100%;
          margin-left: 0;
          text-align: left;
        }
      }
    `
  ]
})
export class NzDemoPageHeaderResponsiveComponent {}

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

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]头像部分