-
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
close #2847 feat(module:descriptions): rename component & add demo fix: fix un-renamed variables WIP feat(module:descriptions): support responsive
- Loading branch information
Wendell
committed
May 22, 2019
1 parent
6342657
commit e4989fa
Showing
29 changed files
with
782 additions
and
13 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,19 @@ | ||
export enum Breakpoint { | ||
'xxl', | ||
'xl', | ||
'lg', | ||
'md', | ||
'sm', | ||
'xs' | ||
} | ||
|
||
export type BreakpointMap = { [index in keyof typeof 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 | ||
|
||
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,39 @@ | ||
import { Component } from '@angular/core'; | ||
|
||
@Component({ | ||
selector: 'nz-demo-descriptions-border', | ||
template: ` | ||
<nz-descriptions nzTitle="User Info" nzBorder> | ||
<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: 1 | ||
title: | ||
zh-CN: 带边框的 | ||
en-US: Border | ||
--- | ||
|
||
## 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,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" nzBorder [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="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,36 @@ | ||
import { Component } from '@angular/core'; | ||
|
||
@Component({ | ||
selector: 'nz-demo-descriptions-responsive', | ||
template: ` | ||
<nz-descriptions | ||
nzTitle="Responsive Descriptions" | ||
nzBorder | ||
[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="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,31 @@ | ||
--- | ||
category: Components | ||
type: Data Display | ||
title: Descriptions | ||
cols: 1 | ||
--- | ||
|
||
Empty state placeholder. | ||
|
||
## When To Use | ||
|
||
When there is no data provided, display for friendly tips. | ||
|
||
## API | ||
|
||
### nz-descriptions | ||
|
||
| Property | Description | Type | Default | | ||
| -------- | ----------- | ---- | ------- | | ||
| `[nzTitle]` | Describe the title of the list, displayed at the top | `string|TemplateRef<void>` | `false` | | ||
| `[nzBorder]` | 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` | - | | ||
| `[nzSize]` | Set the size of the list. | `'default'|'middle'|'small'` | `'default'` | | ||
|
||
|
||
### nz-descriptions-item | ||
|
||
| Property | Description | Type | Default | | ||
| -------- | ----------- | ---- | ------- | | ||
| `[nzTitle]` | Description of the content | `boolean` | `false` | | ||
| `[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,32 @@ | ||
--- | ||
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` | - | | ||
| `[nzSize]` | 设置列表的大小 | `'default'|'middle'|'small'` | `'default'` | | ||
|
||
|
||
### nz-descriptions-item | ||
|
||
| 参数 | 说明 | 类型 | 默认值 | | ||
| -------- | ----------- | ---- | ------- | | ||
| `[nzTitle]` | 内容的描述 | `boolean` | `false` | | ||
| `[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,24 @@ | ||
/** | ||
* @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' | ||
}) | ||
export class NzDescriptionsItemComponent { | ||
@ViewChild(TemplateRef) content: TemplateRef<void>; | ||
|
||
@Input() @InputNumber() nzSpan = 1; | ||
@Input() nzTitle: string = ''; | ||
} |
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 @@ | ||
<div *ngIf="nzTitle" class="ant-descriptions-title"> | ||
<ng-container *nzStringTemplateOutlet="nzTitle">{{ nzTitle }}</ng-container> | ||
</div> | ||
<div class="ant-descriptions-view"> | ||
<table> | ||
<tr | ||
class="ant-descriptions-item" | ||
*ngFor="let row of itemMatrix; let i = index" | ||
[attr.key]="i" | ||
> | ||
<ng-container *ngFor="let item of row; let isLast = last"> | ||
<td class="ant-descriptions-item-label" *nzStringTemplateOutlet="item.title">{{ item.title }}</td> | ||
<td class="ant-descriptions-item-content" | ||
[colSpan]="isLast ? (realColumn - (row.length - 1)) * 2 - 1 : item.span"> | ||
<ng-template [ngTemplateOutlet]="item.content"></ng-template> | ||
</td> | ||
</ng-container> | ||
</tr> | ||
</table> | ||
</div> |
Oops, something went wrong.