• PageHeader页头
    • 何时使用
    • 代码演示
    • API
      • 单独引入此组件
      • nz-page-headercomponent
      • Page header 组成部分

    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>面包屑部分