Skip to content

Commit

Permalink
feat(module:page-header): add page-header component (#2732)
Browse files Browse the repository at this point in the history
* feat(module:page-header): add page-header component

* test(module:page-header): add test

* style(module:page-header): fix tslint

close #2710

* docs(module:page-header): update docs

* chore: sync class name

* test(module:page-header): fix test
  • Loading branch information
hsuanxyz authored and vthinkxie committed Mar 27, 2019
1 parent a9cd84d commit cf51c1f
Show file tree
Hide file tree
Showing 21 changed files with 755 additions and 0 deletions.
1 change: 1 addition & 0 deletions components/components.less
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@
@import "./message/style/index.less";
@import "./modal/style/index.less";
@import "./notification/style/index.less";
@import "./page-header/style/index.less";
@import "./pagination/style/index.less";
@import "./popconfirm/style/index.less";
@import "./popover/style/index.less";
Expand Down
3 changes: 3 additions & 0 deletions components/ng-zorro-antd.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ import { NzMenuModule } from './menu/nz-menu.module';
import { NzMessageModule } from './message/nz-message.module';
import { NzModalModule } from './modal/nz-modal.module';
import { NzNotificationModule } from './notification/nz-notification.module';
import { NzPageHeaderModule } from './page-header/nz-page-header.module';
import { NzPaginationModule } from './pagination/nz-pagination.module';
import { NzPopconfirmModule } from './popconfirm/nz-popconfirm.module';
import { NzPopoverModule } from './popover/nz-popover.module';
Expand Down Expand Up @@ -90,6 +91,7 @@ export * from './layout';
export * from './list';
export * from './mention';
export * from './menu';
export * from './page-header';
export * from './pagination';
export * from './progress';
export * from './radio';
Expand Down Expand Up @@ -149,6 +151,7 @@ export * from './core/no-animation';
NzRadioModule,
NzAlertModule,
NzSpinModule,
NzPageHeaderModule,
NzProgressModule,
NzTabsModule,
NzIconModule,
Expand Down
14 changes: 14 additions & 0 deletions components/page-header/demo/actions.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
---
order: 5
title:
zh-CN: 复杂的例子
en-US: Complex example
---

## zh-CN

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

## en-US

Use the action area and customize the child nodes
139 changes: 139 additions & 0 deletions components/page-header/demo/actions.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,139 @@
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-tags>
<nz-tag [nzColor]="'red'">Warning</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>
<div class="wrap">
<div nz-row class="content padding">
<div nz-col nzSpan="12">
<div class="description">
<span class="term">Created</span>
<p class="detail">Lili Qu</p>
</div>
</div>
<div nz-col nzSpan="12">
<div class="description">
<span class="term">Association</span>
<a>421421</a>
</div>
</div>
<div nz-col nzSpan="12">
<div class="description">
<span class="term">Creation Time</span>
<p class="detail">2017-01-10</p>
</div>
</div>
<div nz-col nzSpan="12">
<div class="description">
<span class="term">Effective Time</span>
<p class="detail">2017-01-10</p>
</div>
</div>
<div nz-col nzSpan="12">
<div class="description">
<span class="term">Remarks</span>
<p class="detail">Gonghu Road, Xihu District, Hangzhou, Zhejiang, China</p>
</div>
</div>
</div>
<div nz-row class="extra-content">
<div nz-col nzSpan="12">
<span class="label">Status</span>
<p class="detail">Pending</p>
</div>
<div nz-col nzSpan="12">
<span class="label"> Price</span>
<p class="detail">$ 568.08</p>
</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);
}
.wrap {
display: flex;
}
.content {
flex: 1;
}
.content.padding {
padding-left: 40px;
}
.content p {
margin-bottom: 8px;
}
.content .description {
display: table;
}
.description .term {
display: table-cell;
margin-right: 8px;
padding-bottom: 8px;
white-space: nowrap;
line-height: 20px;
}
.description .term:after {
position: relative;
top: -0.5px;
margin: 0 8px 0 2px;
content: ":";
}
.description .detail {
display: table-cell;
padding-bottom: 8px;
width: 100%;
line-height: 20px;
}
.extra-content {
min-width: 240px;
text-align: right;
}
.extra-content .label {
font-size: 14px;
color: rgba(0, 0, 0, 0.45);
line-height: 22px;
}
.extra-content .detail {
font-size: 20px;
color: rgba(0, 0, 0, 0.85);
line-height: 28px;
}
`
]
})
export class NzDemoPageHeaderActionsComponent {
}
14 changes: 14 additions & 0 deletions components/page-header/demo/basic.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
---
order: 1
title:
zh-CN: 标准样式
en-US: Basic Page Header
---

## zh-CN

标准页头

## en-US

Basic Page Header
26 changes: 26 additions & 0 deletions components/page-header/demo/basic.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
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() {
console.log('onBack');
}
}
14 changes: 14 additions & 0 deletions components/page-header/demo/breadcrumb.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
---
order: 2
title:
zh-CN: 带面包屑页头
en-US: Use with breadcrumbs
---

## zh-CN

带面包屑页头

## en-US

Use with breadcrumbs
24 changes: 24 additions & 0 deletions components/page-header/demo/breadcrumb.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import { Component } from '@angular/core';

@Component({
selector: 'nz-demo-page-header-breadcrumb',
template: `
<nz-page-header nzBackIcon 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 {
}
14 changes: 14 additions & 0 deletions components/page-header/demo/content.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
---
order: 3
title:
zh-CN: 内容
en-US: Content
---

## zh-CN

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

## en-US

You can use `<nz-page-header-content>` to add content.
83 changes: 83 additions & 0 deletions components/page-header/demo/content.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
import { Component } from '@angular/core';

@Component({
selector: 'nz-demo-page-header-content',
template: `
<nz-page-header nzTitle="Page 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-content>
<div class="wrap">
<div class="content">
<div class="content">
<p>Ant Design interprets the color system into two levels: a system-level color system and a product-level
color system.</p>
<p>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 {
}
Loading

0 comments on commit cf51c1f

Please sign in to comment.