Skip to content
Permalink
Browse files

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

* feat(module:descriptions): add nzColon to toggle colon

* feat: add styles
  • Loading branch information...
wendzhue authored and vthinkxie committed Aug 13, 2019
1 parent 27d4cc0 commit 8e95cb1b008b51f4240dadfa4c2e96c7c95d2734
@@ -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

@@ -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

@@ -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>
@@ -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[][] = [];

@@ -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"

0 comments on commit 8e95cb1

Please sign in to comment.
You can’t perform that action at this time.