我的书签
添加书签
移除书签- PageHeader页头
- 何时使用
- ">代码演示
- API
- nz-page-headercomponent
- Page header 组成部分
PageHeader页头
页头位于页容器中，页容器顶部，起到了内容概览和引导页级操作的作用。包括由面包屑、标题、页面内容简介、页面级操作等、页面级导航组成。
何时使用
当需要使用户快速理解当前页是什么以及方便用户使用页面功能时使用，通常也可被用作页面间导航。
1. import { NzPageHeaderModule } from 'ng-zorro-antd/page-header';
代码演示
标准样式
标准页头，适合使用在需要简单描述的场景。
1. import { Component } from '@angular/core';
2. 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 是透明底色的。在某些情况下，PageHeader 需要自己的背景颜色。
1. import { Component } from '@angular/core';
2. 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 {}
带面包屑页头
带面包屑页头，适合层级比较深的页面，让用户可以快速导航。
1. import { Component } from '@angular/core';
2. 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 提供的所有能力。
1. import { Component } from '@angular/core';
2. 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>
15. 16. <!--avatar-->
17. <nz-avatar nz-page-header-avatar nzSrc="https://avatars0.githubusercontent.com/u/22736418?s=88&v=4"> </nz-avatar>
18. 19. <!--title-->
20. <nz-page-header-title>Title</nz-page-header-title>
21. 22. <!--subtitle-->
23. <nz-page-header-subtitle>This is a subtitle</nz-page-header-subtitle>
24. 25. <!--tags-->
26. <nz-page-header-tags>
27. <nz-tag [nzColor]="'blue'">Running</nz-tag>
28. </nz-page-header-tags>
29. 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>
46. 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. }
76. 77. .content p {
78. margin-bottom: 1em;
79. }
80. 81. .content-link a {
82. margin-right: 16px;
83. }
84. 85. .content-link a img {
86. margin-right: 8px;
87. }
88. 89. .content-image {
90. margin: 0 0 0 60px;
91. display: flex;
92. align-items: center;
93. }
94. 95. .content-image img {
96. width: 100%;
97. }
98. 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
使用操作区，并自定义子节点，适合使用在需要展示一些复杂的信息，帮助用户快速了解这个页面的信息和操作。
1. import { Component } from '@angular/core';
2. 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 {}
响应式
在不同大小的屏幕下，应该有不同的表现
1. import { Component } from '@angular/core';
2. 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. }
57. 58. .main {
59. width: 100%;
60. margin-bottom: 12px;
61. }
62. 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] |
使背景色透明 | boolean |
true |
✅ |
[nzTitle] |
title 文字 | string | TemplateRef<void> |
- | - |
[nzSubtitle] |
subTitle 文字 | string | TemplateRef<void> |
- | - |
[nzBackIcon] |
自定义 back icon | string | TemplateRef<void> |
- | - |
(nzBack) |
返回按钮的点击事件 | EventEmitter<void> |
未订阅该事件时默认调用 Location[back]（需要引入 RouterModule 或者注册 Location)） | - |
| ### 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] |
面包屑部分 | |||
nz-avatar[nz-page-header-avatar] |
头像部分 |
