企业官网建设流程全解析

• UI组件
• 前端

导读

本文围绕 ng-zorro-antd（Angular 版 Ant Design）Progress 进度条组件中的**小型进度条（Mini size progress bar）**展开，讲解如何通过nzSize="small"让线性进度条适配较狭窄的容器区域（如表格单元格、侧边栏卡片、紧凑型统计面板等）。你将掌握小型进度条的最小可用写法、与常规尺寸的差异、状态组合用法、隐藏数值文本的技巧，以及其背后在组件源码与 Less 样式中的尺寸实现原理，可直接照搬到自己的 Angular 项目中。

一、场景定位：什么时候应该使用小型进度条

官方文档（components/progress/demo/line-mini.md）对小型进度条的描述非常精炼——"适合放在较狭窄的区域内（Appropriate for a narrow area）"。这意味着它并不是一种全新的进度条类型，而是标准线性进度条（nzType="line"）在空间受限环境下的紧凑形态。

典型应用场景包括：

• 表格行内展示任务完成度、存储占用率；
• 侧边栏或卡片内的资源使用情况；
• 列表项右侧的轻量进度提示；
• 统计面板中需要并排展示多个指标时，用于节省纵向与横向空间。

与之相对，常规尺寸进度条用于页面主体区域或需要突出显示进度信息的位置。二者的核心区别在于nzSize取值：'default'与'small'。

二、最小可运行示例与逐行解读

仓库中 components/progress/demo/line-mini.ts 给出了完整的可运行示例，其模板部分如下：

import { Component } from '@angular/core'; import { NzProgressModule } from 'ng-zorro-antd/progress'; @Component({ selector: 'nz-demo-progress-line-mini', imports: [NzProgressModule], template: ` <div style="width: 170px;"> <nz-progress [nzPercent]="30" nzSize="small" /> <nz-progress [nzPercent]="50" nzSize="small" nzStatus="active" /> <nz-progress [nzPercent]="70" nzSize="small" nzStatus="exception" /> <nz-progress [nzPercent]="100" nzSize="small" /> <nz-progress [nzPercent]="50" nzSize="small" [nzShowInfo]="false" /> </div> ` }) export class NzDemoProgressLineMiniComponent {}

逐条解读五个用例的含义：

几点实操要点：

1. 外层容器宽度可控：示例中外层div固定为170px，这正是"狭窄区域"的直观体现——小型进度条本身的宽度依然是 100% 铺满父容器，紧凑感来自整体条高变矮、字号变小，而非宽度自适应逻辑。
2. 模块引入：只需要引入NzProgressModule（来源为ng-zorro-antd/progress，见 components/progress/public-api.ts）。
3. 可自由组合：nzSize与nzPercent、nzStatus、nzShowInfo均可叠加使用，官方示例刻意覆盖了 normal / active / exception / success（自动推断）四类状态。

三、核心 API 对照：small 尺寸到底改变了什么

要理解小型进度条，关键是知道nzSize在组件内部产生的影响。结合 components/progress/doc/index.zh-CN.md 的 API 表格与源码，相关参数如下：

关键差异点：nzSize="small"会同时压缩条高与字号。

在 components/progress/progress.component.ts 的strokeWidthgetter 中可以看到：

get strokeWidth(): number { return this.nzStrokeWidth || (this.nzType === 'line' && this.nzSize !== 'small' ? 8 : 6); }

也就是说，当类型为line且尺寸为small时，默认线宽从 8px 降为6px（除非你显式传入nzStrokeWidth覆盖）。这一条是小型进度条"变细"的直接来源。

同时模板中会为根元素追加ant-progress-small类：

[class.ant-progress-small]="nzSize === 'small'" [class.ant-progress-default]="nzSize === 'default'"

配合 components/progress/style/index.less 中的规则：

&-small&-line, &-small&-line &-text .@{iconfont-css-prefix} { font-size: @font-size-sm; }

可见小型线性进度条（ant-progress-small ant-progress-line）及其右侧文本/图标统一采用小号字体（@font-size-sm，即 12px），与常规尺寸形成明显视觉差异。

四、源码级原理：小型进度条的渲染路径

4.1 模板渲染分支

在 components/progress/progress.component.ts 的模板中，nzType === 'line'时走线型分支：

@if (nzType === 'line') { <div> <div class="ant-progress-outer"> <div class="ant-progress-inner"> <div class="ant-progress-bg" [style.width.%]="nzPercent" [style.border-radius]="nzStrokeLinecap === 'round' ? '100px' : '0'" [style.background]="!isGradient ? nzStrokeColor : null" [style.background-image]="isGradient ? lineGradient : null" [style.height.px]="strokeWidth" ></div> </div> </div> <ng-template [ngTemplateOutlet]="progressInfoTemplate" /> </div> }

进度填充条的高度直接绑定strokeWidth（small 时为 6px），宽度按百分比绑定nzPercent。文本部分由progressInfoTemplate控制：仅当nzShowInfo为 true 时才渲染.ant-progress-text；且当状态为exception或success且未自定义nzFormat时，用图标替代百分比文本。

4.2 状态推断与图标映射

nzStatus未显式指定时，组件会根据百分比自动推断状态（inferredStatus）：当nzPercent达到 100 且没有低于 100 的nzSuccessPercent时推断为success，否则保持normal。因此示例 4（[nzPercent]="100" nzSize="small"）会自动显示绿色对勾图标。图标映射见源码中的statusIconNameMap：

const statusIconNameMap = new Map([ ['success', 'check'], ['exception', 'close'] ]);

4.3 全局配置支持

nzSize、nzShowInfo、nzStrokeLinecap、nzStrokeColor等参数都带有@WithConfig()装饰器（源码中@Input() @WithConfig() nzSize: 'default' | 'small' = 'default';），意味着可以通过 ng-zorro-antd 的全局配置服务（NzConfig）统一覆盖，例如在应用中默认将所有进度条设为小型：

import { NzConfigService } from 'ng-zorro-antd/core/config'; // 在组件或服务中注入后设置 this.nzConfigService.set('progress', { nzSize: 'small' });

配置键名为progress，与 components/progress/progress.component.ts 中的const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'progress';对应。

五、进阶组合：让小型进度条在实战中更顺手

5.1 表格列内使用（最常见的"狭窄区域"）

<nz-table #basicTable [nzData]="rows"> <thead> <tr> <th>任务</th> <th>进度</th> </tr> </thead> <tbody> @for (row of basicTable.data; track row) { <tr> <td>{{ row.name }}</td> <td> <nz-progress [nzPercent]="row.percent" nzSize="small" [nzShowInfo]="false" /> </td> </tr> } </tbody> </nz-table>

在表格单元格中，通常建议关闭nzShowInfo（或配合nzFormat用 Tooltip 展示精确数值），避免 2em 宽度的数值文本挤压列宽。

5.2 与nzFormat结合展示紧凑文本

<nz-progress [nzPercent]="68" nzSize="small" [nzFormat]="format" />

format = (percent: number): string => `${percent}% 已完成`;

nzFormat既可以是(percent: number) => string函数，也可以是TemplateRef<{ $implicit: number }>模板引用，详见 API 表格与 components/progress/progress.component.ts 中的formattergetter（默认格式为p => p + '%'）。

5.3 分段小型进度条

nzSteps与nzSize可以组合。从 components/progress/progress.component.ts 的getSteps()可以看到分段逻辑：

const stepWidth = this.nzSize === 'small' ? 2 : 14;

即 small 尺寸下每个分段的宽度从 14px 收窄为2px，这与样式文件中的min-width: 2px; margin-inline-end: 2px（components/progress/style/index.less）相呼应，非常适合在极窄区域内表达分档进度（如"3/5 步"）。

<nz-progress [nzPercent]="60" nzSize="small" [nzSteps]="5" />

5.4 更窄的替代方案：关闭文本信息

如果连 6px 的条高加小号文本都嫌宽，可以直接用[nzShowInfo]="false"，只保留一条细线；若希望进一步变细，可显式指定[nzStrokeWidth]="4"，因为它会优先于尺寸默认值生效（源码中nzStrokeWidth || ...的判断顺序）。

六、常见问题

1. small 会改变圆形/仪表盘进度条吗？不会。nzSize的ant-progress-small类与默认 6px 线宽逻辑仅作用于nzType="line"；圆形/仪表盘的小型化是通过[nzWidth]（默认 132，见 API 表格）实现的，参见同目录的 components/progress/demo/circle-mini.md 与 components/progress/demo/circle-mini.ts（nzType="circle" [nzWidth]="80"即缩小版进度圈）。
2. 为什么设置了nzSize="small"后条看起来没有明显变细？检查是否同时显式传入了nzStrokeWidth——它会覆盖 small 的默认 6px。
3. 如何全局统一使用小型进度条？通过 NzConfigService 的set('progress', { nzSize: 'small' })一次性配置，所有未显式指定nzSize的nz-progress都会生效。

结语

小型进度条是 ng-zorro-antd Progress 组件在空间受限场景下的标准答案：通过nzSize="small"一行配置，将线性进度条默认线宽从 8px 压缩到 6px、文本字号切换为小号，并可自由叠加nzStatus、nzShowInfo、nzFormat、nzSteps等能力。理解其背后strokeWidthgetter 的默认值逻辑、ant-progress-small样式类与全局配置机制后，你就能在表格、卡片、侧边栏等任何"较狭窄的区域"中稳定、精确地使用它。

• UI组件
• 前端