Skip to content
Permalink
Browse files

feat(module:steps): support navigation type and nzDisable nzSubtitle (#…

…4064)

* feat(module:steps): support navigation type and nzDisable nzSubtitle

close #3931

* docs(module:steps): update docs
  • Loading branch information...
hsuanxyz committed Sep 9, 2019
1 parent 66afcf0 commit 272dc98302970d1bc3a1e5e7a4a5fc8d4de783f1
@@ -4,7 +4,7 @@ import { Component } from '@angular/core';
selector: 'nz-demo-steps-clickable',
template: `
<nz-steps [nzCurrent]="index" (nzIndexChange)="onIndexChange($event)">
<nz-step nzTitle="Finished" nzDescription="This is a description."></nz-step>
<nz-step nzTitle="Finished" [nzDisabled]="disable" nzDescription="This is a description."></nz-step>
<nz-step nzTitle="In Progress" nzDescription="This is a description."></nz-step>
<nz-step nzTitle="Waiting" nzDescription="This is a description."></nz-step>
</nz-steps>
@@ -18,7 +18,7 @@ import { Component } from '@angular/core';
})
export class NzDemoStepsClickableComponent {
index = 0;

disable = false;
onIndexChange(index: number): void {
this.index = index;
}
@@ -0,0 +1,16 @@
---
order: 11
title:
zh-CN: 导航步骤
en-US: Navigation Steps
---

## zh-CN

导航类型的步骤条。

## en-US

Navigation steps.


@@ -0,0 +1,48 @@
import { Component } from '@angular/core';

@Component({
selector: 'nz-demo-steps-nav',
template: `
<nz-steps nzType="navigation" nzSize="small" [nzCurrent]="index" (nzIndexChange)="onIndexChange($event)">
<nz-step nzTitle="Step 1" nzSubtitle="00:00:05" nzStatus="finish" nzDescription="This is a description.">
</nz-step>
<nz-step nzTitle="Step 2" nzSubtitle="00:01:02" nzStatus="process" nzDescription="This is a description.">
</nz-step>
<nz-step
nzTitle="Step 3"
nzSubtitle="waiting for long long time"
nzStatus="wait"
nzDescription="This is a description."
>
</nz-step>
</nz-steps>
<nz-steps nzType="navigation" [nzCurrent]="index" (nzIndexChange)="onIndexChange($event)">
<nz-step nzTitle="Step 1" nzStatus="finish"></nz-step>
<nz-step nzTitle="Step 2" nzStatus="process"></nz-step>
<nz-step nzTitle="Step 3" nzStatus="wait"></nz-step>
<nz-step nzTitle="Step 4" nzStatus="wait"></nz-step>
</nz-steps>
<nz-steps nzType="navigation" nzSize="small" [nzCurrent]="index" (nzIndexChange)="onIndexChange($event)">
<nz-step nzTitle="finish 1" nzStatus="finish"></nz-step>
<nz-step nzTitle="finish 2" nzStatus="finish"></nz-step>
<nz-step nzTitle="current process" nzStatus="process"></nz-step>
<nz-step nzTitle="wait" nzStatus="wait" nzDisabled></nz-step>
</nz-steps>
`,
styles: [
`
nz-steps {
display: block;
margin-bottom: 60px;
box-shadow: rgb(232, 232, 232) 0px -1px 0px 0 inset;
}
`
]
})
export class NzDemoStepsNavComponent {
index = 0;

onIndexChange(event: number): void {
this.index = event;
}
}
@@ -3,9 +3,9 @@ import { Component } from '@angular/core';
@Component({
selector: 'nz-demo-steps-simple',
template: `
<nz-steps>
<nz-steps [nzCurrent]="1">
<nz-step nzTitle="Finished" nzDescription="This is a description."></nz-step>
<nz-step nzTitle="In Progress" nzDescription="This is a description."></nz-step>
<nz-step nzTitle="In Progress" nzSubtitle="Left 00:00:08" nzDescription="This is a description."> </nz-step>
<nz-step nzTitle="Waiting" nzDescription="This is a description."></nz-step>
</nz-steps>
`
@@ -35,6 +35,7 @@ The whole of the step bar.

| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| `[nzType]` | type of steps, can be set to one of the following values: `default`, `navigation` | `'default' \| 'navigation'` | `default` |
| `[nzCurrent]` | To set the current step, counting from 0. You can overwrite this state by using `nzStatus` of `nz-step` | `number` | `0` |
| `[nzDirection]` | To specify the direction of the step bar, `horizontal` and `vertical` are currently supported | `'vertical' \| 'horizontal'` | `horizontal` |
| `[nzLabelPlacement]` | Support vertical title and description | `'vertical' \| 'horizontal'` | `horizontal` |
@@ -54,3 +55,5 @@ A single step in the step bar.
| `[nzIcon]` | icon of the step, optional property | `string \| string[] \| Set<string> \| { [klass: string]: any; }` \| `TemplateRef<void>` | - |
| `[nzStatus]` | to specify the status. It will be automatically set by `nzCurrent` of `nz-steps` if not configured. Optional values are: `wait` `process` `finish` `error` | `'wait' \| 'process' \| 'finish' \| 'error'` | `'wait'` |
| `[nzTitle]` | title of the step | `string \| TemplateRef<void>` | - |
| `[nzSubtitle]` | subTitle of the step | `string \| TemplateRef<void>` | - |
| `[nzDisabled]` | disable click | `boolean` | `false` |
@@ -36,6 +36,7 @@ import { NzStepsModule } from 'ng-zorro-antd/steps';

| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| `[nzType]` | 步骤条类型,有 `default` 和 `navigation` 两种 | `'default' \| 'navigation'` | `default` |
| `[nzCurrent]` | 指定当前步骤,从 0 开始记数。在子 `nz-step` 元素中,可以通过 `nzStatus` 属性覆盖状态 | `number` | `0` |
| `[nzDirection]` | 指定步骤条方向。目前支持水平(`horizontal`)和竖直(`vertical`)两种方向 | `'vertical' \| 'horizontal'` | `horizontal` |
| `[nzLabelPlacement]` | 指定标签放置位置,默认水平放图标右侧,可选 `vertical` 放图标下方 | `'vertical' \| 'horizontal'` | `horizontal` |
@@ -55,3 +56,5 @@ import { NzStepsModule } from 'ng-zorro-antd/steps';
| `[nzIcon]` | 步骤图标的类型,可选 | `string \| string[] \| Set<string> \| { [klass: string]: any; }` \| `TemplateRef<void>` | - |
| `[nzStatus]` | 指定状态。当不配置该属性时,会使用 `nz-steps` 的 `nzCurrent` 来自动指定状态。可选:`wait` `process` `finish` `error` | `'wait' \| 'process' \| 'finish' \| 'error'` | `'wait'` |
| `[nzTitle]` | 标题 | `string \| TemplateRef<void>` | - |
| `[nzSubtitle]` | 子标题 | `string \| TemplateRef<void>` | - |
| `[nzDisabled]` | 禁用点击 | `boolean` | `false` |
@@ -1,19 +1,26 @@
<div class="ant-steps-item-tail" *ngIf="last !== true"></div>
<div class="ant-steps-item-icon">
<ng-template [ngIf]="!showProcessDot">
<span class="ant-steps-icon" *ngIf="nzStatus === 'finish' && !nzIcon"><i nz-icon nzType="check"></i></span>
<span class="ant-steps-icon" *ngIf="nzStatus === 'error'"><i nz-icon nzType="close"></i></span>
<span class="ant-steps-icon" *ngIf="(nzStatus === 'process' || nzStatus === 'wait') && !nzIcon">{{ index + 1 }}</span>
<span class="ant-steps-icon" *ngIf="nzIcon">
<div
class="ant-steps-item-container"
[attr.role]="(clickable && !nzDisabled) ? 'button' : null"
[tabindex]="(clickable && !nzDisabled) ? 0 : null"
(click)="onClick()">
<div class="ant-steps-item-tail" *ngIf="last !== true"></div>
<div class="ant-steps-item-icon">
<ng-template [ngIf]="!showProcessDot">
<span class="ant-steps-icon" *ngIf="nzStatus === 'finish' && !nzIcon"><i nz-icon nzType="check"></i></span>
<span class="ant-steps-icon" *ngIf="nzStatus === 'error'"><i nz-icon nzType="close"></i></span>
<span
class="ant-steps-icon"
*ngIf="(nzStatus === 'process' || nzStatus === 'wait') && !nzIcon">{{ index + 1 }}</span>
<span class="ant-steps-icon" *ngIf="nzIcon">
<ng-container *ngIf="isIconString; else iconTemplate">
<i nz-icon [nzType]="!oldAPIIcon && nzIcon" [ngClass]="oldAPIIcon && nzIcon"></i>
</ng-container>
<ng-template #iconTemplate>
<ng-template [ngTemplateOutlet]="nzIcon"></ng-template>
</ng-template>
</span>
</ng-template>
<ng-template [ngIf]="showProcessDot">
</ng-template>
<ng-template [ngIf]="showProcessDot">
<span class="ant-steps-icon">
<ng-template #processDotTemplate>
<span class="ant-steps-icon-dot"></span>
@@ -23,13 +30,17 @@
[ngTemplateOutletContext]="{ $implicit: processDotTemplate, status:nzStatus, index:index }">
</ng-template>
</span>
</ng-template>
</div>
<div class="ant-steps-item-content">
<div class="ant-steps-item-title">
<ng-container *nzStringTemplateOutlet="nzTitle">{{ nzTitle }}</ng-container>
</ng-template>
</div>
<div class="ant-steps-item-description">
<ng-container *nzStringTemplateOutlet="nzDescription">{{ nzDescription }}</ng-container>
<div class="ant-steps-item-content">
<div class="ant-steps-item-title">
<ng-container *nzStringTemplateOutlet="nzTitle">{{ nzTitle }}</ng-container>
<div *ngIf="nzSubtitle" class="ant-steps-item-subtitle">
<ng-container *nzStringTemplateOutlet="nzSubtitle">{{ nzSubtitle }}</ng-container>
</div>
</div>
<div class="ant-steps-item-description">
<ng-container *nzStringTemplateOutlet="nzDescription">{{ nzDescription }}</ng-container>
</div>
</div>
</div>
@@ -19,7 +19,7 @@ import {
ViewEncapsulation
} from '@angular/core';

import { NgClassType } from 'ng-zorro-antd/core';
import { InputBoolean, NgClassType } from 'ng-zorro-antd/core';
import { Subject } from 'rxjs';

@Component({
@@ -34,17 +34,19 @@ import { Subject } from 'rxjs';
'[class.ant-steps-item-process]': 'nzStatus === "process"',
'[class.ant-steps-item-finish]': 'nzStatus === "finish"',
'[class.ant-steps-item-error]': 'nzStatus === "error"',
'[class.ant-steps-custom]': '!!nzIcon',
'[class.ant-steps-next-error]': '(outStatus === "error") && (currentIndex === index + 1)',
'[attr.role]': 'clickable ? "button" : null',
'(click)': 'onClick()'
'[class.ant-steps-item-active]': 'currentIndex === index',
'[class.ant-steps-item-disabled]': 'nzDisabled',
'[class.ant-steps-item-custom]': '!!nzIcon',
'[class.ant-steps-next-error]': '(outStatus === "error") && (currentIndex === index + 1)'
}
})
export class NzStepComponent implements OnDestroy {
@ViewChild('processDotTemplate', { static: false }) processDotTemplate: TemplateRef<void>;

@Input() nzTitle: string | TemplateRef<void>;
@Input() nzSubtitle: string | TemplateRef<void>;
@Input() nzDescription: string | TemplateRef<void>;
@Input() @InputBoolean() nzDisabled = false;

@Input()
get nzStatus(): string {
@@ -105,7 +107,7 @@ export class NzStepComponent implements OnDestroy {
}

onClick(): void {
if (this.clickable && this.currentIndex !== this.index) {
if (this.clickable && this.currentIndex !== this.index && !this.nzDisabled) {
this.click$.next(this.index);
}
}
@@ -46,6 +46,7 @@ export class NzStepsComponent implements OnChanges, OnInit, OnDestroy, AfterCont
@Input() nzCurrent = 0;
@Input() nzDirection: NzDirectionType = 'horizontal';
@Input() nzLabelPlacement: 'horizontal' | 'vertical' = 'horizontal';
@Input() nzType: 'default' | 'navigation' = 'default';
@Input() nzSize: NzSizeDSType = 'default';
@Input() nzStartIndex = 0;
@Input() nzStatus: NzStatusType = 'process';
@@ -139,7 +140,8 @@ export class NzStepsComponent implements OnChanges, OnInit, OnDestroy, AfterCont
[`ant-steps-label-vertical`]:
(this.showProcessDot || this.nzLabelPlacement === 'vertical') && this.nzDirection === 'horizontal',
[`ant-steps-dot`]: this.showProcessDot,
['ant-steps-small']: this.nzSize === 'small'
['ant-steps-small']: this.nzSize === 'small',
['ant-steps-navigation']: this.nzType === 'navigation'
};
}
}

0 comments on commit 272dc98

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