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
NG-ZORRO · Apr 22, 2019 · 77567d4 · 77567d4
1 parent 469bff0
commit 77567d4
Show file tree

Hide file tree

Showing 21 changed files with 730 additions and 0 deletions.
diff --git a/components/core/responsive/index.ts b/components/core/responsive/index.ts
@@ -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)'
+};
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
+
+Basic usage.
diff --git a/components/descriptions/demo/border.ts b/components/descriptions/demo/border.ts
@@ -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 {
+}
diff --git a/components/descriptions/demo/custom-size.md b/components/descriptions/demo/custom-size.md
@@ -0,0 +1,14 @@
+---
+order: 1
+title:
+  zh-CN: 带边框的
+  en-US: Border
+---
+
+## zh-CN
+
+简单的展示。
+
+## en-US
+
+Basic usage.
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" 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';
+}
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,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 {}
diff --git a/components/descriptions/doc/index.en-US.md b/components/descriptions/doc/index.en-US.md
@@ -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` |
diff --git a/components/descriptions/doc/index.zh-CN.md b/components/descriptions/doc/index.zh-CN.md
@@ -0,0 +1,32 @@
+---
+category: Components
+type: Other
+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` |
diff --git a/components/descriptions/index.ts b/components/descriptions/index.ts
@@ -0,0 +1 @@
+export * from './public-api';
diff --git a/components/descriptions/nz-descriptions-definitions.ts b/components/descriptions/nz-descriptions-definitions.ts
@@ -0,0 +1,9 @@
+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,22 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  TemplateRef,
+  ViewChild,
+  ViewEncapsulation
+} from '@angular/core';
+import { InputNumber } from '../core/util';
+
+@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 = '';
+}
diff --git a/components/descriptions/nz-descriptions.component.html b/components/descriptions/nz-descriptions.component.html
@@ -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>