-
Notifications
You must be signed in to change notification settings - Fork 3.9k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(module:page-header): new pageheader style and support avatar
- Loading branch information
Showing
17 changed files
with
243 additions
and
106 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,14 +1,14 @@ | ||
| --- | ||
| order: 5 | ||
| order: 4 | ||
| title: | ||
| zh-CN: 复杂的例子 | ||
| en-US: Complex example | ||
| zh-CN: 多种形态的 PageHeader | ||
| en-US: Various forms of PageHeader | ||
| --- | ||
|
|
||
| ## zh-CN | ||
|
|
||
| 使用操作区，并自定义子节点 | ||
| 使用操作区，并自定义子节点，适合使用在需要展示一些复杂的信息，帮助用户快速了解这个页面的信息和操作。 | ||
|
|
||
| ## en-US | ||
|
|
||
| Use the action area and customize the child nodes | ||
| Use the operating area and customize the sub-nodes, suitable for use in the need to display some complex information to help users quickly understand the information and operations of this page. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,14 +1,14 @@ | ||
| --- | ||
| order: 3 | ||
| title: | ||
| zh-CN: 内容 | ||
| en-US: Content | ||
| zh-CN: 组合示例 | ||
| en-US: Complete example | ||
| --- | ||
|
|
||
| ## zh-CN | ||
|
|
||
| 你可以使用 `<nz-page-header-content>` 添加内容。 | ||
| 使用了 PageHeader 提供的所有能力。 | ||
|
|
||
| ## en-US | ||
|
|
||
| You can use `<nz-page-header-content>` to add content. | ||
| Used all the capabilities provided by PageHeader. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,9 +1,27 @@ | ||
| import { NzPageHeaderModule } from 'ng-zorro-antd/page-header'; | ||
| import { NzAvatarModule } from 'ng-zorro-antd/avatar'; | ||
| import { NzTagModule } from 'ng-zorro-antd/tag'; | ||
| import { NzTabsModule } from 'ng-zorro-antd/tabs'; | ||
| import { NzButtonModule } from 'ng-zorro-antd/button'; | ||
| import { NzBreadCrumbModule } from 'ng-zorro-antd/breadcrumb'; | ||
| import { NzDescriptionsModule } from 'ng-zorro-antd/descriptions'; | ||
| import { NzTypographyModule } from 'ng-zorro-antd/typography'; | ||
| import { NzDropDownModule } from 'ng-zorro-antd/dropdown'; | ||
| import { NzIconModule } from 'ng-zorro-antd/icon'; | ||
| import { NzStatisticModule } from 'ng-zorro-antd/statistic'; | ||
| import { NzGridModule } from 'ng-zorro-antd/grid'; | ||
|
|
||
| export const moduleList = [ NzPageHeaderModule, NzTagModule, NzTabsModule, NzBreadCrumbModule, NzButtonModule, NzDescriptionsModule, NzTypographyModule ]; | ||
| export const moduleList = [ | ||
| NzPageHeaderModule, | ||
| NzTagModule, | ||
| NzTabsModule, | ||
| NzBreadCrumbModule, | ||
| NzButtonModule, | ||
| NzDescriptionsModule, | ||
| NzTypographyModule, | ||
| NzAvatarModule, | ||
| NzDropDownModule, | ||
| NzIconModule, | ||
| NzStatisticModule, | ||
| NzGridModule | ||
| ]; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| --- | ||
| order: 5 | ||
| title: | ||
| zh-CN: 响应式 | ||
| en-US: responsive | ||
| --- | ||
|
|
||
| ## zh-CN | ||
|
|
||
| 在不同大小的屏幕下，应该有不同的表现 | ||
|
|
||
| ## en-US | ||
|
|
||
| Under different screen sizes, there should be different performance |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,75 @@ | ||
| 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 {} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.