-
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:descriptions): add component (#3327)
* feat(module:descriptions): add component close #2847 feat(module:descriptions): rename component & add demo fix: fix un-renamed variables WIP feat(module:descriptions): support responsive * fix: test * fix: test, add responsive test * test: fix grid responsive test by the way * fix: fix typedef of responsiveMap and other fixes * fix: restrict window viewport to pass test * fix: fix * docs: fix docs
- Loading branch information
1 parent
a05f5a5
commit 11bf89e
Showing
34 changed files
with
892 additions
and
35 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
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 |
---|---|---|
@@ -0,0 +1,27 @@ | ||
/** | ||
* @license | ||
* Copyright Alibaba.com All Rights Reserved. | ||
* | ||
* Use of this source code is governed by an MIT-style license that can be | ||
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE | ||
*/ | ||
|
||
export enum Breakpoint { | ||
xxl = 'xxl', | ||
xl = 'xl', | ||
lg = 'lg', | ||
md = 'md', | ||
sm = 'sm', | ||
xs = 'xs' | ||
} | ||
|
||
export type BreakpointMap = { [key in Breakpoint]: string }; | ||
|
||
export const responsiveMap: BreakpointMap = { | ||
xs: '(max-width: 575px)', | ||
sm: '(min-width: 576px)', | ||
md: '(min-width: 768px)', | ||
lg: '(min-width: 992px)', | ||
xl: '(min-width: 1200px)', | ||
xxl: '(min-width: 1600px)' | ||
}; |
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 @@ | ||
export * from './public-api'; |
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 @@ | ||
export * from './break-point'; |
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: 0 | ||
title: | ||
zh-CN: 基本 | ||
en-US: Basic | ||
--- | ||
|
||
## zh-CN | ||
|
||
简单的展示。 | ||
|
||
## en-US | ||
|
||
Basic usage. |
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,20 @@ | ||
import { Component } from '@angular/core'; | ||
|
||
@Component({ | ||
selector: 'nz-demo-descriptions-basic', | ||
template: ` | ||
<nz-descriptions nzTitle="User Info"> | ||
<nz-descriptions-item nzTitle="UserName">Zhou Maomao</nz-descriptions-item> | ||
<nz-descriptions-item nzTitle="Telephone">18100000000</nz-descriptions-item> | ||
<nz-descriptions-item nzTitle="Live">Hangzhou, Zhejiang</nz-descriptions-item> | ||
<nz-descriptions-item nzTitle="Remark">Empty</nz-descriptions-item> | ||
<nz-descriptions-item nzTitle="Address"> | ||
No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China | ||
</nz-descriptions-item> | ||
</nz-descriptions> | ||
` | ||
}) | ||
|
||
export class NzDemoDescriptionsBasicComponent { | ||
|
||
} |
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: 1 | ||
title: | ||
zh-CN: 带边框的 | ||
en-US: Border | ||
--- | ||
|
||
## zh-CN | ||
|
||
带边框和背景颜色列表。 | ||
|
||
## en-US | ||
|
||
Descriptions with border and background color. |
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,38 @@ | ||
import { Component } from '@angular/core'; | ||
|
||
@Component({ | ||
selector: 'nz-demo-descriptions-border', | ||
template: ` | ||
<nz-descriptions nzTitle="User Info" nzBordered> | ||
<nz-descriptions-item nzTitle="Product">Cloud Database</nz-descriptions-item> | ||
<nz-descriptions-item nzTitle="Billing Mode">Prepaid</nz-descriptions-item> | ||
<nz-descriptions-item nzTitle="Automatic Renewal">YES</nz-descriptions-item> | ||
<nz-descriptions-item nzTitle="Order Time"> | ||
2018-04-24 18:00:00 | ||
</nz-descriptions-item> | ||
<nz-descriptions-item nzTitle="Usage Time" [nzSpan]="3"> | ||
2018-04-24 18:00:00 To 2019-04-24 18:00:00 | ||
</nz-descriptions-item> | ||
<nz-descriptions-item nzTitle="Status" [nzSpan]="3"> | ||
<nz-badge nzStatus="processing" nzText="Running"></nz-badge> | ||
</nz-descriptions-item> | ||
<nz-descriptions-item nzTitle="Negotiated Amount">$80.00</nz-descriptions-item> | ||
<nz-descriptions-item nzTitle="Discount">$20.00</nz-descriptions-item> | ||
<nz-descriptions-item nzTitle="Official Receipts">$60.00</nz-descriptions-item> | ||
<nz-descriptions-item nzTitle="Config Info"> | ||
Data disk type: MongoDB | ||
<br /> | ||
Database version: 3.4 | ||
<br /> | ||
Package: dds.mongo.mid | ||
<br /> | ||
Storage space: 10 GB | ||
<br /> | ||
Replication_factor:3 | ||
<br /> | ||
Region: East China 1<br /> | ||
</nz-descriptions-item> | ||
</nz-descriptions> | ||
` | ||
}) | ||
export class NzDemoDescriptionsBorderComponent {} |
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: 2 | ||
title: | ||
zh-CN: 自定义尺寸 | ||
en-US: Custom size | ||
--- | ||
|
||
## zh-CN | ||
|
||
自定义尺寸,适应在各种容器中展示。 | ||
|
||
## en-US | ||
|
||
Custom sizes to fit in a variety of containers. |
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,41 @@ | ||
import { Component } from '@angular/core'; | ||
|
||
@Component({ | ||
selector: 'nz-demo-descriptions-custom-size', | ||
template: ` | ||
<nz-radio-group [(ngModel)]="size"> | ||
<label nz-radio nzValue="default">default</label> | ||
<label nz-radio nzValue="middle">middle</label> | ||
<label nz-radio nzValue="small">small</label> | ||
</nz-radio-group> | ||
<br /> | ||
<br /> | ||
<nz-descriptions nzTitle="Custom Size" nzBordered [nzSize]="size"> | ||
<nz-descriptions-item nzTitle="Product"> | ||
Cloud Database | ||
</nz-descriptions-item> | ||
<nz-descriptions-item nzTitle="Billing">Prepaid</nz-descriptions-item> | ||
<nz-descriptions-item nzTitle="time">18:00:00</nz-descriptions-item> | ||
<nz-descriptions-item nzTitle="Amount">$80.00</nz-descriptions-item> | ||
<nz-descriptions-item nzTitle="Discount">$20.00</nz-descriptions-item> | ||
<nz-descriptions-item nzTitle="Official">$60.00</nz-descriptions-item> | ||
<nz-descriptions-item nzTitle="Config Info"> | ||
Data disk type: MongoDB | ||
<br /> | ||
Database version: 3.4 | ||
<br /> | ||
Package: dds.mongo.mid | ||
<br /> | ||
Storage space: 10 GB | ||
<br /> | ||
Replication_factor:3 | ||
<br /> | ||
Region: East China 1 | ||
<br /> | ||
</nz-descriptions-item> | ||
</nz-descriptions> | ||
` | ||
}) | ||
export class NzDemoDescriptionsCustomSizeComponent { | ||
size = 'default'; | ||
} |
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: 3 | ||
title: | ||
zh-CN: 响应式 | ||
en-US: Responsive | ||
--- | ||
|
||
## zh-CN | ||
|
||
通过响应式的配置可以实现在小屏幕设备上的完美呈现。 | ||
|
||
## en-US | ||
|
||
Responsive configuration enables perfect presentation on small screen devices. |
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,32 @@ | ||
import { Component } from '@angular/core'; | ||
|
||
@Component({ | ||
selector: 'nz-demo-descriptions-responsive', | ||
template: ` | ||
<nz-descriptions nzTitle="Responsive Descriptions" [nzColumn]="{ xxl: 4, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }"> | ||
<nz-descriptions-item nzTitle="Product"> | ||
Cloud Database | ||
</nz-descriptions-item> | ||
<nz-descriptions-item nzTitle="Billing">Prepaid</nz-descriptions-item> | ||
<nz-descriptions-item nzTitle="time">18:00:00</nz-descriptions-item> | ||
<nz-descriptions-item nzTitle="Amount">$80.00</nz-descriptions-item> | ||
<nz-descriptions-item nzTitle="Discount">$20.00</nz-descriptions-item> | ||
<nz-descriptions-item nzTitle="Official">$60.00</nz-descriptions-item> | ||
<nz-descriptions-item nzTitle="Config Info"> | ||
Data disk type: MongoDB | ||
<br /> | ||
Database version: 3.4 | ||
<br /> | ||
Package: dds.mongo.mid | ||
<br /> | ||
Storage space: 10 GB | ||
<br /> | ||
Replication_factor:3 | ||
<br /> | ||
Region: East China 1 | ||
<br /> | ||
</nz-descriptions-item> | ||
</nz-descriptions> | ||
` | ||
}) | ||
export class NzDemoDescriptionsResponsiveComponent {} |
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,38 @@ | ||
--- | ||
category: Components | ||
type: Data Display | ||
title: Descriptions | ||
cols: 1 | ||
--- | ||
|
||
Display multiple read-only fields in groups. | ||
|
||
## When To Use | ||
|
||
Commonly displayed on the details page. | ||
|
||
## API | ||
|
||
### nz-descriptions | ||
|
||
| Property | Description | Type | Default | | ||
| -------- | ----------- | ---- | ------- | | ||
| `[nzTitle]` | Describe the title of the list, displayed at the top | `string\|TemplateRef<void>` | `false` | | ||
| `[nzBordered]` | Whether to display the border | `boolean` | `false` | | ||
| `[nzColumn]` | The number of `nz-descriptions-item` in a row. It could be a number or a object like `{ xs: 8, sm: 16, md: 24}` | `number\|object` | `{ xxl: 3, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }` | | ||
| `[nzSize]` | Set the size of the list. Only works when `nzBordered` is set | `'default'|'middle'|'small'` | `'default'` | | ||
|
||
### Import this Component Individually | ||
|
||
You can get more detail [here](/docs/getting-started/en#import-a-component-individually). | ||
|
||
```ts | ||
import { NzDescriptionsModule } from 'ng-zorro-antd'; | ||
``` | ||
|
||
### nz-descriptions-item | ||
|
||
| Property | Description | Type | Default | | ||
| -------- | ----------- | ---- | ------- | | ||
| `[nzTitle]` | Description of the content | `boolean` | `string\|TemplateRef<void>` | | ||
| `[nzSpan]` | The number of columns included | `number` | `1` | |
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,39 @@ | ||
--- | ||
category: Components | ||
type: 数据展示 | ||
title: Descriptions | ||
subtitle: 描述列表 | ||
cols: 1 | ||
--- | ||
|
||
成组显示多个只读字段。 | ||
|
||
## 何时使用 | ||
|
||
常见于详情页的信息展示。 | ||
|
||
## API | ||
|
||
### nz-descriptions | ||
|
||
| 参数 | 说明 | 类型 | 默认值 | | ||
| -------- | ----------- | ---- | ------- | | ||
| `[nzTitle]` | 描述列表的标题,显示在最顶部 | `string\|TemplateRef<void>` | `false` | | ||
| `[nzBorder]` | 是否展示边框 | `boolean` | `false` | | ||
| `[nzColumn]` | 一行的 `nz-descriptions-item` 的数量,可以写成像素值或支持响应式的对象写法 `{ xs: 8, sm: 16, md: 24}` | `number\|object` | `{ xxl: 3, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }` | | ||
| `[nzSize]` | 设置列表的大小(只有设置 `nzBordered` 时生效) | `'default'|'middle'|'small'` | `'default'` | | ||
|
||
### 单独引入此组件 | ||
|
||
想要了解更多关于单独引入组件的内容,可以在[快速上手](/docs/getting-started/zh#单独引入某个组件)页面进行查看。 | ||
|
||
```ts | ||
import { NzDescriptionsModule } from 'ng-zorro-antd'; | ||
``` | ||
|
||
### nz-descriptions-item | ||
|
||
| 参数 | 说明 | 类型 | 默认值 | | ||
| -------- | ----------- | ---- | ------- | | ||
| `[nzTitle]` | 内容的描述 | `string\|TemplateRef<void>` | - | | ||
| `[nzSpan]` | 包含列的数量 | `number` | `1` | |
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,9 @@ | ||
/** | ||
* @license | ||
* Copyright Alibaba.com All Rights Reserved. | ||
* | ||
* Use of this source code is governed by an MIT-style license that can be | ||
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE | ||
*/ | ||
|
||
export * from './public-api'; |
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,17 @@ | ||
/** | ||
* @license | ||
* Copyright Alibaba.com All Rights Reserved. | ||
* | ||
* Use of this source code is governed by an MIT-style license that can be | ||
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE | ||
*/ | ||
|
||
import { TemplateRef } from '@angular/core'; | ||
|
||
export type NzDescriptionsSize = 'default' | 'middle' | 'small'; | ||
|
||
export interface NzDescriptionsItemRenderProps { | ||
title: string | TemplateRef<void>; | ||
span: number; | ||
content: TemplateRef<void>; | ||
} |
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,4 @@ | ||
<!-- Use a template to wrap contents so contents wouldn't be displayed. --> | ||
<ng-template> | ||
<ng-content></ng-content> | ||
</ng-template> |
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,26 @@ | ||
/** | ||
* @license | ||
* Copyright Alibaba.com All Rights Reserved. | ||
* | ||
* Use of this source code is governed by an MIT-style license that can be | ||
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE | ||
*/ | ||
|
||
import { ChangeDetectionStrategy, Component, Input, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core'; | ||
|
||
import { InputNumber } from 'ng-zorro-antd/core'; | ||
|
||
@Component({ | ||
changeDetection: ChangeDetectionStrategy.OnPush, | ||
encapsulation: ViewEncapsulation.None, | ||
selector: 'nz-descriptions-item', | ||
templateUrl: './nz-descriptions-item.component.html', | ||
exportAs: 'nzDescriptionsItem', | ||
preserveWhitespaces: false | ||
}) | ||
export class NzDescriptionsItemComponent { | ||
@ViewChild(TemplateRef) content: TemplateRef<void>; | ||
|
||
@Input() @InputNumber() nzSpan = 1; | ||
@Input() nzTitle: string = ''; | ||
} |
Oops, something went wrong.