Skip to content
Open
Show file tree
Hide file tree
Changes from 1 commit
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
14 changes: 14 additions & 0 deletions components/steps/demo/description-only.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
---
order: 7
title:
zh-CN: 仅描述
en-US: Description only
---

## zh-CN

当不设置 `nzTitle` 时,仅展示描述。描述会固定显示在横线下方,不会与步骤条重叠。

## en-US

When `nzTitle` is not set, only the description is shown. The description always renders below the horizontal line and does not overlay the step bar.
18 changes: 18 additions & 0 deletions components/steps/demo/description-only.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import { Component } from '@angular/core';

import { NzStepsModule } from 'ng-zorro-antd/steps';

@Component({
selector: 'nz-demo-steps-description-only',
imports: [NzStepsModule],
template: `
<nz-steps [nzCurrent]="1">
<nz-step
nzDescription="This is a description only. The title row is reserved so the description stays below the horizontal line."
></nz-step>
<nz-step nzTitle="In Progress" nzDescription="This step has both title and description."></nz-step>
<nz-step nzDescription="Another step with description only. No title provided."></nz-step>
</nz-steps>
`
})
export class NzDemoStepsDescriptionOnlyComponent {}
2 changes: 1 addition & 1 deletion components/steps/doc/index.en-US.md
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ A single step in the step bar.
| `[nzDescription]` | description of the step, optional property | `string \| TemplateRef<void>` | - |
| `[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>` | - |
| `[nzTitle]` | title of the step (optional). When omitted, only the description is shown and it renders below the horizontal line | `string \| TemplateRef<void>` | - |
Comment thread
claytonlin1110 marked this conversation as resolved.
Outdated
| `[nzSubtitle]` | subTitle of the step | `string \| TemplateRef<void>` | - |
| `[nzDisabled]` | disable click | `boolean` | `false` |
| `[nzPercentage]` | Progress percentage of the step in `process` status (only works on basic Steps) | `number` | - |
2 changes: 1 addition & 1 deletion components/steps/doc/index.zh-CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ description: 引导用户按照流程完成任务的导航条。
| `[nzDescription]` | 步骤的详情描述,可选 | `string \| TemplateRef<void>` | - |
| `[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>` | - |
| `[nzTitle]` | 标题(可选)。不设置时仅展示描述,描述会显示在横线下方 | `string \| TemplateRef<void>` | - |
| `[nzSubtitle]` | 子标题 | `string \| TemplateRef<void>` | - |
| `[nzDisabled]` | 禁用点击 | `boolean` | `false` |
| `[nzPercentage]` | 当前状态为 `process` 的步骤所显示的进度条进度(只对基本类型的 `nz-steps` 生效) | `number` | - |
17 changes: 11 additions & 6 deletions components/steps/step.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -92,12 +92,17 @@ import { NzProgressFormatter, NzProgressModule } from 'ng-zorro-antd/progress';
}
</div>
<div class="ant-steps-item-content">
<div class="ant-steps-item-title">
<ng-container *nzStringTemplateOutlet="nzTitle">{{ nzTitle }}</ng-container>
@if (nzSubtitle) {
<div class="ant-steps-item-subtitle">
<ng-container *nzStringTemplateOutlet="nzSubtitle">{{ nzSubtitle }}</ng-container>
</div>
<div
class="ant-steps-item-title"
[class.ant-steps-item-title-placeholder]="!nzTitle && !nzSubtitle && nzDescription"
Comment thread
claytonlin1110 marked this conversation as resolved.
Outdated
>
@if (nzTitle !== null || nzSubtitle !== null) {
<ng-container *nzStringTemplateOutlet="nzTitle">{{ nzTitle }}</ng-container>
@if (nzSubtitle) {
<div class="ant-steps-item-subtitle">
<ng-container *nzStringTemplateOutlet="nzSubtitle">{{ nzSubtitle }}</ng-container>
</div>
}
}
</div>
Comment thread
claytonlin1110 marked this conversation as resolved.
Outdated
<div class="ant-steps-item-description">
Expand Down
5 changes: 5 additions & 0 deletions components/steps/style/index.less
Original file line number Diff line number Diff line change
Expand Up @@ -111,6 +111,11 @@
background: @wait-tail-color;
content: '';
}

// When only description is provided, reserve title row so description stays below the line
&-placeholder {
min-height: @steps-title-line-height;
}
}

&-subtitle {
Expand Down
Loading