Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(module:progress): should not set success when success percent is … #3135

Merged
merged 5 commits into from
Mar 27, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 8 additions & 1 deletion components/progress/demo/circle-dynamic.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,14 @@ import { Component } from '@angular/core';
<button nz-button (click)="decline()"><i nz-icon type="minus"></i></button>
<button nz-button (click)="increase()"><i nz-icon type="plus"></i></button>
</nz-button-group>
`
`,
styles: [
`
nz-progress {
margin-right: 8px;
}
`
]
})
export class NzDemoProgressCircleDynamicComponent {
percent = 0;
Expand Down
14 changes: 14 additions & 0 deletions components/progress/demo/round.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
---
order: 10
title:
zh-CN: 圆角/方角边缘
en-US: Square linecaps
---

## zh-CN

通过设定 `nzStrokeLinecap='square|round'` 可以调整进度条边缘的形状。

## en-US

By setting `nzStrokeLinecap='square'`, you can change the linecaps from round to square.
11 changes: 11 additions & 0 deletions components/progress/demo/round.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import { Component } from '@angular/core';

@Component({
selector: 'nz-demo-progress-round',
template: `
<nz-progress nzStrokeLinecap="square" nzPercent="75"></nz-progress>
<nz-progress nzStrokeLinecap="square" nzType="circle" nzPercent="75"></nz-progress>
<nz-progress nzStrokeLinecap="square" nzType="dashboard" nzPercent="75"></nz-progress>
`
})
export class NzDemoProgressRoundComponent {}
55 changes: 31 additions & 24 deletions components/progress/nz-progress.component.html
Original file line number Diff line number Diff line change
@@ -1,61 +1,68 @@
<ng-template #progressInfoTemplate>
<span class="ant-progress-text" *ngIf="nzShowInfo">
<ng-container *ngIf="(nzStatus=='exception')||(nzStatus=='success')&&(!isFormatSet); else formatTemplate">
<!-- Theme is handled in type here. -->
<i nz-icon [nzType]="icon" [nzTheme]="iconTheme"></i>
<ng-container *ngIf="status === 'exception' || (status === 'success' && !nzFormat); else formatTemplate">
<i nz-icon [nzType]="icon"></i>
</ng-container>
<ng-template #formatTemplate>
{{ nzFormat(nzPercent) }}
{{ formatter(nzPercent) }}
</ng-template>
</span>
</ng-template>
<div [ngClass]="'ant-progress ant-progress-status-'+nzStatus"
[class.ant-progress-line]="nzType=='line'"
[class.ant-progress-small]="nzSize=='small'"
<div
[ngClass]="'ant-progress ant-progress-status-' + status"
[class.ant-progress-line]="nzType == 'line'"
[class.ant-progress-small]="nzSize == 'small'"
[class.ant-progress-show-info]="nzShowInfo"
[class.ant-progress-circle]="isCirCleStyle">
<div *ngIf="nzType=='line'">
[class.ant-progress-circle]="isCircleStyle"
>
<!-- Line progress -->
<div *ngIf="nzType === 'line'">
<div class="ant-progress-outer">
<div class="ant-progress-inner">
<div class="ant-progress-bg"
<div
class="ant-progress-bg"
[style.width.%]="nzPercent"
[style.border-radius]="nzStrokeLinecap === 'round' ? '100px' : '0'"
[style.background]="nzStrokeColor"
[style.height.px]="nzStrokeWidth">
</div>
<div class="ant-progress-success-bg"
[style.height.px]="strokeWidth"
></div>
<div
class="ant-progress-success-bg"
[style.width.%]="nzSuccessPercent"
[style.border-radius]="nzStrokeLinecap === 'round' ? '100px' : '0'"
[style.height.px]="nzStrokeWidth"></div>
[style.height.px]="strokeWidth"
></div>
</div>
</div>
<ng-template [ngTemplateOutlet]="progressInfoTemplate"></ng-template>
</div>
<!-- Circle/Dashboard progress -->
<div
[style.width.px]="this.nzWidth"
[style.height.px]="this.nzWidth"
[style.fontSize.px]="this.nzWidth*0.15+6"
[style.fontSize.px]="this.nzWidth * 0.15 + 6"
class="ant-progress-inner"
*ngIf="isCirCleStyle">
*ngIf="isCircleStyle"
>
<svg class="ant-progress-circle " viewBox="0 0 100 100">
<path
class="ant-progress-circle-trail"
stroke="#f3f3f3"
fill-opacity="0"
[attr.stroke-width]="nzStrokeWidth"
[attr.stroke-width]="strokeWidth"
[ngStyle]="trailPathStyle"
[attr.d]="pathString">
</path>
[attr.d]="pathString"
></path>
<path
class="ant-progress-circle-path"
[attr.d]="pathString"
[attr.stroke-linecap]="nzStrokeLinecap"
fill-opacity="0"
[attr.stroke]="nzStrokeColor || statusColorMap[nzStatus]"
[attr.stroke-width]="nzPercent?nzStrokeWidth:0"
[ngStyle]="strokePathStyle">
</path>
[attr.stroke]="nzStrokeColor || statusColorMap[status]"
[attr.stroke-width]="nzPercent ? strokeWidth : 0"
[ngStyle]="strokePathStyle"
></path>
</svg>
<ng-template [ngTemplateOutlet]="progressInfoTemplate"></ng-template>
</div>
</div>
</div>
Loading