feat(module:descriptions): add extra property (#5859)

close #5855
NG-ZORRO · Oct 23, 2020 · 846331e · 846331e
1 parent b256461
commit 846331e
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 7 deletions.
diff --git a/components/descriptions/demo/custom-size.ts b/components/descriptions/demo/custom-size.ts
@@ -11,10 +11,8 @@ import { NzDescriptionsSize } from 'ng-zorro-antd/descriptions';
     </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 nzTitle="Custom Size" [nzExtra]="extraTpl" 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>
@@ -35,6 +33,19 @@ import { NzDescriptionsSize } from 'ng-zorro-antd/descriptions';
         <br />
       </nz-descriptions-item>
     </nz-descriptions>
+    <br />
+    <br />
+    <nz-descriptions nzTitle="Custom Size" [nzSize]="size" [nzExtra]="extraTpl">
+      <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>
+    <ng-template #extraTpl>
+      <button nz-button nzType="primary">Edit</button>
+    </ng-template>
   `
 })
 export class NzDemoDescriptionsCustomSizeComponent {

diff --git a/components/descriptions/demo/module b/components/descriptions/demo/module
@@ -1,5 +1,6 @@
 import { NzDescriptionsModule } from 'ng-zorro-antd/descriptions';
 import { NzBadgeModule } from 'ng-zorro-antd/badge';
 import { NzRadioModule } from 'ng-zorro-antd/radio';
+import { NzButtonModule } from 'ng-zorro-antd/button';
 
-export const moduleList = [ NzDescriptionsModule, NzBadgeModule, NzRadioModule ];
+export const moduleList = [ NzDescriptionsModule, NzBadgeModule, NzRadioModule, NzButtonModule ];
diff --git a/components/descriptions/descriptions.component.ts b/components/descriptions/descriptions.component.ts
@@ -45,8 +45,13 @@ const defaultColumnMap: { [key in NzBreakpointEnum]: number } = {
   exportAs: 'nzDescriptions',
   preserveWhitespaces: false,
   template: `
-    <div *ngIf="nzTitle" class="ant-descriptions-title">
-      <ng-container *nzStringTemplateOutlet="nzTitle">{{ nzTitle }}</ng-container>
+    <div *ngIf="nzTitle || nzExtra" class="ant-descriptions-header">
+      <div *ngIf="nzTitle" class="ant-descriptions-title">
+        <ng-container *nzStringTemplateOutlet="nzTitle">{{ nzTitle }}</ng-container>
+      </div>
+      <div *ngIf="nzExtra" class="ant-descriptions-extra">
+        <ng-container *nzStringTemplateOutlet="nzExtra">{{ nzExtra }}</ng-container>
+      </div>
     </div>
     <div class="ant-descriptions-view">
       <table>
@@ -153,6 +158,7 @@ export class NzDescriptionsComponent implements OnChanges, OnDestroy, AfterConte
   @Input() @WithConfig() nzColumn: number | { [key in NzBreakpointEnum]: number } = defaultColumnMap;
   @Input() @WithConfig() nzSize: NzDescriptionsSize = 'default';
   @Input() nzTitle: string | TemplateRef<void> = '';
+  @Input() nzExtra?: string | TemplateRef<void>;
   @Input() @WithConfig() @InputBoolean() nzColon: boolean = true;
 
   itemMatrix: NzDescriptionsItemRenderProps[][] = [];

diff --git a/components/descriptions/doc/index.en-US.md b/components/descriptions/doc/index.en-US.md
@@ -23,6 +23,7 @@ import { NzDescriptionsModule } from 'ng-zorro-antd/descriptions';
 | Property | Description | Type | Default | Global Config |
 | -------- | ----------- | ---- | ------- | ------------- |
 | `[nzTitle]` | Describe the title of the list, displayed at the top | `string\|TemplateRef<void>` | `false` |
+| `[nzExtra]` | The action area of the description list, placed at the top-right | `string\|TemplateRef<void>` | `-` |
 | `[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'` | ✅ |

diff --git a/components/descriptions/doc/index.zh-CN.md b/components/descriptions/doc/index.zh-CN.md
@@ -24,6 +24,7 @@ import { NzDescriptionsModule } from 'ng-zorro-antd/descriptions';
 | 参数 | 说明 | 类型 | 默认值 | 支持全局配置 |
 | -------- | ----------- | ---- | ------- | --- |
 | `[nzTitle]` | 描述列表的标题，显示在最顶部 | `string\|TemplateRef<void>` | `false` |
+| `[nzExtra]` | 描述列表的操作区域，显示在右上方 | `string\|TemplateRef<void>` | `-` |
 | `[nzBordered]` | 是否展示边框 | `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'` | ✅ |