-
diff --git a/components/progress/nz-progress.component.ts b/components/progress/nz-progress.component.ts
index fd95c80c684..8e966f7889a 100644
--- a/components/progress/nz-progress.component.ts
+++ b/components/progress/nz-progress.component.ts
@@ -20,6 +20,7 @@ import {
NzProgressGapPositionType,
NzProgressGradientProgress,
NzProgressStatusType,
+ NzProgressStepItem,
NzProgressStrokeColorType,
NzProgressStrokeLinecapType,
NzProgressTypeType
@@ -62,12 +63,19 @@ export class NzProgressComponent implements OnChanges, OnInit, OnDestroy {
@Input() @WithConfig(NZ_CONFIG_COMPONENT_NAME, 'top') nzGapPosition: NzProgressGapPositionType;
@Input() @WithConfig(NZ_CONFIG_COMPONENT_NAME, 'round') nzStrokeLinecap: NzProgressStrokeLinecapType;
+ @Input() @InputNumber() nzSteps?: number;
+
+ steps: NzProgressStepItem[] = [];
+
/** Gradient style when `nzType` is `line`. */
lineGradient: string | null = null;
/** If user uses gradient color. */
isGradient = false;
+ /** If the linear progress is a step progress. */
+ isSteps = false;
+
/**
* Each progress whose `nzType` is circle or dashboard should have unique id to
* define `
`.
@@ -110,7 +118,7 @@ export class NzProgressComponent implements OnChanges, OnInit, OnDestroy {
constructor(public nzConfigService: NzConfigService) {}
ngOnChanges(changes: SimpleChanges): void {
- const { nzGapPosition, nzStrokeLinecap, nzStrokeColor, nzGapDegree, nzType, nzStatus, nzPercent, nzSuccessPercent } = changes;
+ const { nzSteps, nzGapPosition, nzStrokeLinecap, nzStrokeColor, nzGapDegree, nzType, nzStatus, nzPercent, nzSuccessPercent } = changes;
if (nzStatus) {
this.cachedStatus = this.nzStatus || this.cachedStatus;
@@ -138,6 +146,11 @@ export class NzProgressComponent implements OnChanges, OnInit, OnDestroy {
if (nzGapPosition || nzStrokeLinecap || nzGapDegree || nzType || nzPercent || nzStrokeColor) {
this.getCirclePaths();
}
+
+ if (nzSteps) {
+ this.isSteps = isNotNil(nzSteps.currentValue);
+ this.getSteps();
+ }
}
ngOnInit(): void {
@@ -161,6 +174,27 @@ export class NzProgressComponent implements OnChanges, OnInit, OnDestroy {
this.icon = ret ? ret + (this.isCircleStyle ? '-o' : '-circle-fill') : '';
}
+ /**
+ * Calculate step render configs.
+ */
+ private getSteps(): void {
+ const current = Math.floor(this.nzSteps! * (this.nzPercent / 100));
+ const stepWidth = this.nzSize === 'small' ? 2 : 14;
+
+ for (let i = 0; i < this.nzSteps!; i++) {
+ let color;
+ if (i <= current - 1) {
+ color = this.nzStrokeColor;
+ }
+ const stepStyle = {
+ backgroundColor: `${color}`,
+ width: `${stepWidth}px`,
+ height: `${this.strokeWidth}px`
+ };
+ this.steps.push(stepStyle);
+ }
+ }
+
/**
* Calculate paths when the type is circle or dashboard.
*/
diff --git a/components/progress/nz-progress.definitions.ts b/components/progress/nz-progress.definitions.ts
index ef71b2f1a2a..290cfccdf1c 100644
--- a/components/progress/nz-progress.definitions.ts
+++ b/components/progress/nz-progress.definitions.ts
@@ -36,3 +36,9 @@ export interface NzProgressCirclePath {
stroke: string | null;
strokePathStyle: NgStyleInterface;
}
+
+export interface NzProgressStepItem {
+ backgroundColor: string;
+ width: string;
+ height: string;
+}
diff --git a/components/progress/nz-progress.spec.ts b/components/progress/nz-progress.spec.ts
index 2d1eec25596..e08b2473ba3 100644
--- a/components/progress/nz-progress.spec.ts
+++ b/components/progress/nz-progress.spec.ts
@@ -167,6 +167,19 @@ describe('progress', () => {
expect(progressBar.style.background).toBe('');
expect(progressBar.style.backgroundImage).toBe('linear-gradient(to right, rgb(16, 142, 233) 0%, rgb(135, 208, 104) 100%)');
});
+
+ it('should support steps mode', () => {
+ testComponent.steps = 5;
+ testComponent.percent = 50;
+ testComponent.strokeColor = '#108ee9';
+ fixture.detectChanges();
+
+ const steps = progress.nativeElement.querySelectorAll('.ant-progress-steps-item');
+
+ expect(steps.length).toBe(5);
+ expect((steps[0] as HTMLDivElement).style.backgroundColor).toBe('rgb(16, 142, 233)');
+ expect((steps[4] as HTMLDivElement).style.backgroundColor).toBeFalsy();
+ });
});
describe('progress dashboard', () => {
@@ -384,6 +397,7 @@ describe('progress', () => {
[nzPercent]="percent"
[nzStrokeColor]="strokeColor"
[nzStrokeLinecap]="strokeLinecap"
+ [nzSteps]="steps"
>
{{ percent }} / 100
@@ -399,6 +413,7 @@ export class NzTestProgressLineComponent {
successPercent = 0;
showInfo = true;
strokeLinecap = 'round';
+ steps?: number;
strokeColor: NzProgressStrokeColorType;
}