Page Header
IMPORT MODULE

The page header is used to declare the subject of the page and contains the most important information that the user is concerned about, so that the user can quickly understand what the current page and functions.

Examples

Structure

基本结构,具备响应式布局功能,主要断点为 768px 和 576px,拖动窗口改变大小试试看。

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

@Component({
  selector: 'components-page-header-structure',
  template: `
    <page-header
      [title]="'title'"
      [breadcrumb]="breadcrumb"
      [logo]="logo"
      [action]="action"
      [extra]="extra"
      [content]="content"
      [tab]="tab"
    >
      <ng-template #breadcrumb>面包屑</ng-template>
      <ng-template #logo><div class="logo">logo</div></ng-template>
      <ng-template #action><div class="action">action</div></ng-template>
      <ng-template #content><div class="desc">content</div></ng-template>
      <ng-template #extra><div class="extra">extra</div></ng-template>
      <ng-template #tab>
        <nz-tabset [nzSize]="'default'">
          <nz-tab nzTitle="页签一"></nz-tab>
          <nz-tab nzTitle="页签二"></nz-tab>
          <nz-tab nzTitle="页签三"></nz-tab>
        </nz-tabset>
      </ng-template>
    </page-header>
  `,
  styles: [
    `
      :host ::ng-deep .logo {
        background: #3ba0e9;
        color: #fff;
        height: 100%;
      }
      :host ::ng-deep h1.title {
        background: rgba(16, 142, 233, 1);
        color: #fff;
      }
      :host ::ng-deep .action,
      :host ::ng-deep .desc,
      :host ::ng-deep .extra {
        background: #7dbcea;
        color: #fff;
      }
    `,
  ],
  encapsulation: ViewEncapsulation.Emulated,
})
export class ComponentsPageHeaderStructureComponent {}
Standard

标准页头。

expand codeexpand code
import { Component } from '@angular/core';
import { NzMessageService } from 'ng-zorro-antd/message';

@Component({
  selector: 'components-page-header-standard',
  template: `
    <page-header
      [title]="'单号:234231029431'"
      [breadcrumb]="breadcrumb"
      [logo]="logo"
      [action]="action"
      [extra]="extra"
      [content]="content"
      [tab]="tab"
    >
      <ng-template #breadcrumb>
        <nz-breadcrumb>
          <nz-breadcrumb-item><a>一级菜单</a></nz-breadcrumb-item>
          <nz-breadcrumb-item><a>二级菜单</a></nz-breadcrumb-item>
          <nz-breadcrumb-item><a>三级菜单</a></nz-breadcrumb-item>
        </nz-breadcrumb>
      </ng-template>
      <ng-template #logo><img src="https://gw.alipayobjects.com/zos/rmsportal/nxkuOJlFJuAUhzlMTCEe.png" /></ng-template>
      <ng-template #action>
        <nz-button-group>
          <button nz-button>操作</button>
          <button nz-button>操作</button>
        </nz-button-group>
        <button nz-button nz-dropdown [nzDropdownMenu]="actionMoreMenu" class="mx-sm">
          <i nz-icon nzType="ellipsis"></i>
        </button>
        <nz-dropdown-menu #actionMoreMenu="nzDropdownMenu">
          <ul nz-menu>
            <li nz-menu-item>选项一</li>
            <li nz-menu-item>选项二</li>
            <li nz-menu-item>选项三</li>
          </ul>
        </nz-dropdown-menu>
        <button nz-button [nzType]="'primary'">主操作</button>
      </ng-template>
      <ng-template #content>
        <sv-container size="small" col="2">
          <sv label="创建人">曲丽丽</sv>
          <sv label="订购产品">XX 服务</sv>
          <sv label="创建时间">2017-07-07</sv>
          <sv label="关联单据"><a (click)="msg.success('yes')">12421</a></sv>
          <sv label="生效日期">2017-07-07 ~ 2017-08-08</sv>
          <sv label="备注">请于两个工作日内确认</sv>
        </sv-container>
      </ng-template>
      <ng-template #extra>
        <div nz-row>
          <div nz-col nzXs="24" nzSm="12">
            <p class="text-grey">状态</p>
            <p class="text-lg">待审批</p>
          </div>
          <div nz-col nzXs="24" nzSm="12">
            <p class="text-grey">订单金额</p>
            <p class="text-lg">¥ 568.08</p>
          </div>
        </div>
      </ng-template>
      <ng-template #tab>
        <nz-tabset [nzSize]="'default'">
          <nz-tab nzTitle="详情"></nz-tab>
          <nz-tab nzTitle="规则"></nz-tab>
        </nz-tabset>
      </ng-template>
    </page-header>
  `,
})
export class ComponentsPageHeaderStandardComponent {
  constructor(public msg: NzMessageService) {}
}
With Image

带图片的页头。

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

@Component({
  selector: 'components-page-header-image',
  template: `
    <page-header [title]="'卡片列表'" [breadcrumb]="breadcrumb" [extra]="extra" [content]="content">
      <ng-template #breadcrumb>
        <nz-breadcrumb>
          <nz-breadcrumb-item><a>一级菜单</a></nz-breadcrumb-item>
          <nz-breadcrumb-item><a>二级菜单</a></nz-breadcrumb-item>
          <nz-breadcrumb-item><a>三级菜单</a></nz-breadcrumb-item>
        </nz-breadcrumb>
      </ng-template>
      <ng-template #extra>
        <div style="margin-top: -60px; text-align: center; width: 195px;">
          <img class="img-fluid" src="https://gw.alipayobjects.com/zos/rmsportal/RzwpdLnhmvDJToTdfDPe.png" />
        </div>
      </ng-template>
      <ng-template #content>
        <p>段落示意:蚂蚁金服务设计平台 ant.design,用最小的工作量,无缝接入蚂蚁金服生态,提供跨越设计与开发的体验解决方案。</p>
        <div class="d-flex pt-md">
          <a class="d-flex pr-lg">
            <img class="pr-sm" src="https://gw.alipayobjects.com/zos/rmsportal/MjEImQtenlyueSmVEfUD.svg" />快速开始
          </a>
          <a class="d-flex pr-lg">
            <img class="pr-sm" src="https://gw.alipayobjects.com/zos/rmsportal/NbuDUAuBlIApFuDvWiND.svg" />产品简介
          </a>
          <a class="d-flex"> <img class="pr-sm" src="https://gw.alipayobjects.com/zos/rmsportal/ohOEPSYdDTNnyMbGuyLb.svg" />产品文档 </a>
        </div>
      </ng-template>
    </page-header>
  `,
})
export class ComponentsPageHeaderImageComponent {}
Simple

简单的页头。

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

@Component({
  selector: 'components-page-header-simple',
  template: `
    <page-header [title]="'页面标题'" [breadcrumb]="breadcrumb">
      <ng-template #breadcrumb>
        <nz-breadcrumb>
          <nz-breadcrumb-item><a>一级菜单</a></nz-breadcrumb-item>
          <nz-breadcrumb-item><a>二级菜单</a></nz-breadcrumb-item>
          <nz-breadcrumb-item><a>三级菜单</a></nz-breadcrumb-item>
        </nz-breadcrumb>
      </ng-template>
    </page-header>
  `,
})
export class ComponentsPageHeaderSimpleComponent {}

API

PropertyDescriptionTypeDefaultGlobal Config
[title]Title of the pagestring,TemplateRef<void>-
[autoTitle]Whether to automatically generate the title and locate it from the main menu with the current routebooleantrue
[syncTitle]Whether to automatically synchronize the title to TitleService, ReuseService, only valid when title is of type stringbooleantrue
[home]Home page text of the breadcrumb, if empty is specified, it will not be displayedstring首页
[homeLink]Home page link of the breadcrumbstring/
[homeI18n]Home page i18n of the breadcrumbstring-
[autoBreadcrumb]Whether to automatically generate navigation, use the current route to locate from the main menubooleantrue
[recursiveBreadcrumb]Search automatically upward recursively, if the menu data source contains /ware, then /ware/1 is also regarded as /ware itembooleanfalse
[loading]Whether loadingbooleanfalse-
[wide]Whether widebooleanfalse-
[fixed]Whether fixed modebooleanfalse
[fixedOffsetTop]Fixed offset of the fixed modenumber64
[breadcrumb]Custom navigation areaTemplateRef<void>--
[logo]Custom LOGO areaTemplateRef<void>--
[action]Custom action areaTemplateRef<void>--
[content]Custom content areaTemplateRef<void>--
[extra]Customize extra information areaTemplateRef<void>--
[tab]Custom tab areaTemplateRef<void>--

FAQ

Automatically generated navigation

By default, the navigation is automatically generated based on the menu data. Sometimes you may want to hide the menu data of a certain node, you can specify the menu hideInBreadcrumb: true.

Fixed mode

The fixed mode will override the reuse-tab component during scrolling.