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

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

Merged
merged 2 commits into from Sep 9, 2019
Merged
Changes from 1 commit
Commits
File filter...
Filter file types
Jump to…
Jump to file or symbol
Failed to load files and symbols.

Always

Just for now

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

This comment has been minimized.

Copy link
@wendzhue

wendzhue Sep 6, 2019

Member

清理一下 demo 好了,这个属性没看到有更改,而且也不是 true

或者改成 true 然后用例里反过来测。

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` | `string` | `default` |
This conversation was marked as resolved by hsuanxyz

This comment has been minimized.

Copy link
@wendzhue

wendzhue Sep 6, 2019

Member

string 换成 'default' | 'navigation' 好了,更准确。

| `[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` 两种 | `string` | `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'
};
}
}
ProTip! Use n and p to navigate between commits in a pull request.
You can’t perform that action at this time.