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
NG-ZORRO · Sep 9, 2019 · 272dc98 · 272dc98
1 parent 66afcf0
commit 272dc98
Show file tree

Hide file tree

Showing 14 changed files with 345 additions and 66 deletions.
diff --git a/components/steps/demo/clickable.ts b/components/steps/demo/clickable.ts
@@ -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;
   }

diff --git a/components/steps/demo/nav.md b/components/steps/demo/nav.md
@@ -0,0 +1,16 @@
+---
+order: 11
+title:
+  zh-CN: 导航步骤
+  en-US: Navigation Steps
+---
+
+## zh-CN
+
+导航类型的步骤条。
+
+## en-US
+
+Navigation steps.
+
+
diff --git a/components/steps/demo/nav.ts b/components/steps/demo/nav.ts
@@ -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;
+  }
+}
diff --git a/components/steps/demo/simple.ts b/components/steps/demo/simple.ts
@@ -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>
   `

diff --git a/components/steps/doc/index.en-US.md b/components/steps/doc/index.en-US.md
@@ -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` |
diff --git a/components/steps/doc/index.zh-CN.md b/components/steps/doc/index.zh-CN.md
@@ -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` |
diff --git a/components/steps/nz-step.component.html b/components/steps/nz-step.component.html
@@ -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>
diff --git a/components/steps/nz-step.component.ts b/components/steps/nz-step.component.ts
@@ -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);
     }
   }

diff --git a/components/steps/nz-steps.component.ts b/components/steps/nz-steps.component.ts
@@ -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'
     };
   }
 }