feat(module:descriptions): add component (NG-ZORRO#3327)

* feat(module:descriptions): add component close NG-ZORRO#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
hsuanxyz · Jun 5, 2019 · f3c8f6a · f3c8f6a
1 parent ad3f4ea
commit f3c8f6a
Show file tree

Hide file tree

Showing 34 changed files with 892 additions and 35 deletions.
diff --git a/components/components.less b/components/components.less
@@ -13,6 +13,7 @@
 @import "./collapse/style/entry.less";
 @import "./comment/style/entry.less";
 @import "./date-picker/style/entry.less";
+@import "./descriptions/style/entry.less";
 @import "./divider/style/entry.less";
 @import "./drawer/style/entry.less";
 @import "./dropdown/style/entry.less";

diff --git a/components/core/public-api.ts b/components/core/public-api.ts
@@ -21,3 +21,4 @@ export * from './util/public-api';
 export * from './wave/public-api';
 export * from './dropdown/public-api';
 export * from './logger/public-api';
+export * from './responsive/public-api';
diff --git a/components/core/responsive/break-point.ts b/components/core/responsive/break-point.ts
@@ -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)'
+};
diff --git a/components/core/responsive/index.ts b/components/core/responsive/index.ts
@@ -0,0 +1 @@
+export * from './public-api';
diff --git a/components/core/responsive/public-api.ts b/components/core/responsive/public-api.ts
@@ -0,0 +1 @@
+export * from './break-point';
diff --git a/components/descriptions/demo/basic.md b/components/descriptions/demo/basic.md
@@ -0,0 +1,14 @@
+---
+order: 0
+title:
+  zh-CN: 基本
+  en-US: Basic
+---
+
+## zh-CN
+
+简单的展示。
+
+## en-US
+
+Basic usage.
diff --git a/components/descriptions/demo/basic.ts b/components/descriptions/demo/basic.ts
@@ -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 {
+
+}
diff --git a/components/descriptions/demo/border.md b/components/descriptions/demo/border.md
@@ -0,0 +1,14 @@
+---
+order: 1
+title:
+  zh-CN: 带边框的
+  en-US: Border
+---
+
+## zh-CN
+
+带边框和背景颜色列表。
+
+## en-US
+
+Descriptions with border and background color.
diff --git a/components/descriptions/demo/border.ts b/components/descriptions/demo/border.ts
@@ -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 {}
diff --git a/components/descriptions/demo/custom-size.md b/components/descriptions/demo/custom-size.md
@@ -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.
diff --git a/components/descriptions/demo/custom-size.ts b/components/descriptions/demo/custom-size.ts
@@ -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';
+}
diff --git a/components/descriptions/demo/responsive.md b/components/descriptions/demo/responsive.md
@@ -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.
diff --git a/components/descriptions/demo/responsive.ts b/components/descriptions/demo/responsive.ts
@@ -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 {}
diff --git a/components/descriptions/doc/index.en-US.md b/components/descriptions/doc/index.en-US.md
@@ -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` |
diff --git a/components/descriptions/doc/index.zh-CN.md b/components/descriptions/doc/index.zh-CN.md
@@ -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` |
diff --git a/components/descriptions/index.ts b/components/descriptions/index.ts
@@ -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';
diff --git a/components/descriptions/nz-descriptions-definitions.ts b/components/descriptions/nz-descriptions-definitions.ts
@@ -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>;
+}
diff --git a/components/descriptions/nz-descriptions-item.component.html b/components/descriptions/nz-descriptions-item.component.html
@@ -0,0 +1,4 @@
+<!-- Use a template to wrap contents so contents wouldn't be displayed. -->
+<ng-template>
+  <ng-content></ng-content>
+</ng-template>
diff --git a/components/descriptions/nz-descriptions-item.component.ts b/components/descriptions/nz-descriptions-item.component.ts
@@ -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 = '';
+}