feat(module:descriptions): add nzColon to toggle colon (NG-ZORRO#3923)

* feat(module:descriptions): add nzColon to toggle colon * feat: add styles
hsuanxyz · Aug 13, 2019 · 4c5aac2 · 4c5aac2
1 parent c3ce137
commit 4c5aac2
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 11 deletions.
diff --git a/components/descriptions/doc/index.en-US.md b/components/descriptions/doc/index.en-US.md
@@ -29,6 +29,7 @@ import { NzDescriptionsModule } from 'ng-zorro-antd/descriptions';
 | `[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'` |
+| `[nzColon]` | Show colon after title | `boolean` | `true` |
 
 ### nz-descriptions-item
 

diff --git a/components/descriptions/doc/index.zh-CN.md b/components/descriptions/doc/index.zh-CN.md
@@ -30,6 +30,7 @@ import { NzDescriptionsModule } from 'ng-zorro-antd/descriptions';
 | `[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'` |
+| `[nzColon]` | 在标题后显示冒号 | `boolean` | `true` |
 
 ### nz-descriptions-item
 

diff --git a/components/descriptions/nz-descriptions.component.html b/components/descriptions/nz-descriptions.component.html
@@ -6,21 +6,26 @@
   <table>
     <tbody>
       <ng-container *ngIf="nzLayout === 'horizontal'">
-        <tr class="ant-descriptions-row" *ngFor="let row of itemMatrix; let i = index">
+        <tr class="ant-descriptions-row"
+            *ngFor="let row of itemMatrix; let i = index">
           <ng-container *ngFor="let item of row; let isLast = last">
             <!-- Horizontal & NOT Bordered -->
             <ng-container *ngIf="!nzBordered">
-              <td class="ant-descriptions-item" [colSpan]="item.span">
-                <span class="ant-descriptions-item-label">{{ item.title }}</span>
+              <td class="ant-descriptions-item"
+                  [colSpan]="item.span">
+                <span class="ant-descriptions-item-label"
+                      [class.ant-descriptions-item-colon]="nzColon">{{ item.title }}</span>
                 <span class="ant-descriptions-item-content">
                   <ng-template [ngTemplateOutlet]="item.content"></ng-template>
                 </span>
               </td>
             </ng-container>
             <!-- Horizontal & Bordered -->
             <ng-container *ngIf="nzBordered">
-              <td class="ant-descriptions-item-label" *nzStringTemplateOutlet="item.title">{{ item.title }}</td>
-              <td class="ant-descriptions-item-content" [colSpan]="isLast ? item.span * 2 - 1 : item.span">
+              <td class="ant-descriptions-item-label"
+                  *nzStringTemplateOutlet="item.title">{{ item.title }}</td>
+              <td class="ant-descriptions-item-content"
+                  [colSpan]="isLast ? item.span * 2 - 1 : item.span">
                 <ng-template [ngTemplateOutlet]="item.content"></ng-template>
               </td>
             </ng-container>
@@ -34,14 +39,17 @@
           <ng-container *ngFor="let row of itemMatrix; let i = index">
             <tr class="ant-descriptions-row">
               <ng-container *ngFor="let item of row; let isLast = last">
-                <td class="ant-descriptions-item" [colSpan]="item.span">
-                  <span class="ant-descriptions-item-label">{{ item.title }}</span>
+                <td class="ant-descriptions-item"
+                    [colSpan]="item.span">
+                  <span class="ant-descriptions-item-label"
+                        [class.ant-descriptions-item-colon]="nzColon">{{ item.title }}</span>
                 </td>
               </ng-container>
             </tr>
             <tr class="ant-descriptions-row">
               <ng-container *ngFor="let item of row; let isLast = last">
-                <td class="ant-descriptions-item" [colSpan]="item.span">
+                <td class="ant-descriptions-item"
+                    [colSpan]="item.span">
                   <span class="ant-descriptions-item-content">
                     <ng-template [ngTemplateOutlet]="item.content"></ng-template>
                   </span>
@@ -55,14 +63,16 @@
           <ng-container *ngFor="let row of itemMatrix; let i = index">
             <tr class="ant-descriptions-row">
               <ng-container *ngFor="let item of row; let isLast = last">
-                <td class="ant-descriptions-item-label" [colSpan]="item.span">
+                <td class="ant-descriptions-item-label"
+                    [colSpan]="item.span">
                   {{ item.title }}
                 </td>
               </ng-container>
             </tr>
             <tr class="ant-descriptions-row">
               <ng-container *ngFor="let item of row; let isLast = last">
-                <td class="ant-descriptions-item-content" [colSpan]="item.span">
+                <td class="ant-descriptions-item-content"
+                    [colSpan]="item.span">
                   <ng-template [ngTemplateOutlet]="item.content"></ng-template>
                 </td>
               </ng-container>

diff --git a/components/descriptions/nz-descriptions.component.ts b/components/descriptions/nz-descriptions.component.ts
@@ -67,6 +67,7 @@ export class NzDescriptionsComponent implements OnChanges, OnDestroy, AfterConte
   @Input() nzColumn: number | { [key in Breakpoint]: number } = defaultColumnMap;
   @Input() nzSize: NzDescriptionsSize = 'default';
   @Input() nzTitle: string | TemplateRef<void> = '';
+  @Input() @InputBoolean() nzColon: boolean = true;
 
   itemMatrix: NzDescriptionsItemRenderProps[][] = [];
 

diff --git a/components/progress/nz-progress.component.html b/components/progress/nz-progress.component.html
@@ -44,7 +44,7 @@
     class="ant-progress-inner"
     *ngIf="isCircleStyle"
   >
-    <svg class="ant-progress-circle " viewBox="0 0 100 100">
+    <svg class="ant-progress-circle" viewBox="0 0 100 100">
       <path
         class="ant-progress-circle-trail"
         stroke="#f3f3f3"