UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载导读本文围绕 ng-zorro-antdAngular 版 Ant DesignProgress 进度条组件中的**小型进度条Mini size progress bar**展开讲解如何通过nzSizesmall让线性进度条适配较狭窄的容器区域如表格单元格、侧边栏卡片、紧凑型统计面板等。你将掌握小型进度条的最小可用写法、与常规尺寸的差异、状态组合用法、隐藏数值文本的技巧以及其背后在组件源码与 Less 样式中的尺寸实现原理可直接照搬到自己的 Angular 项目中。一、场景定位什么时候应该使用小型进度条官方文档components/progress/demo/line-mini.md对小型进度条的描述非常精炼——适合放在较狭窄的区域内Appropriate for a narrow area。这意味着它并不是一种全新的进度条类型而是标准线性进度条nzTypeline在空间受限环境下的紧凑形态。典型应用场景包括表格行内展示任务完成度、存储占用率侧边栏或卡片内的资源使用情况列表项右侧的轻量进度提示统计面板中需要并排展示多个指标时用于节省纵向与横向空间。与之相对常规尺寸进度条用于页面主体区域或需要突出显示进度信息的位置。二者的核心区别在于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 stylewidth: 170px; nz-progress [nzPercent]30 nzSizesmall / nz-progress [nzPercent]50 nzSizesmall nzStatusactive / nz-progress [nzPercent]70 nzSizesmall nzStatusexception / nz-progress [nzPercent]100 nzSizesmall / nz-progress [nzPercent]50 nzSizesmall [nzShowInfo]false / /div }) export class NzDemoProgressLineMiniComponent {}逐条解读五个用例的含义用例配置效果1[nzPercent]30 nzSizesmall30% 完成度的小型进度条默认状态normal2[nzPercent]50 nzSizesmall nzStatusactive50% 的进行中状态进度条带流动动画3[nzPercent]70 nzSizesmall nzStatusexception70% 的异常状态进度条与文本变为错误色4[nzPercent]100 nzSizesmall100% 完成自动推断为 success 状态并显示对勾图标5[nzPercent]50 nzSizesmall [nzShowInfo]false隐藏右侧数值文本只保留纯进度条最省空间几点实操要点外层容器宽度可控示例中外层div固定为170px这正是狭窄区域的直观体现——小型进度条本身的宽度依然是 100% 铺满父容器紧凑感来自整体条高变矮、字号变小而非宽度自适应逻辑。模块引入只需要引入NzProgressModule来源为ng-zorro-antd/progress见 components/progress/public-api.ts。可自由组合nzSize与nzPercent、nzStatus、nzShowInfo均可叠加使用官方示例刻意覆盖了 normal / active / exception / success自动推断四类状态。三、核心 API 对照small 尺寸到底改变了什么要理解小型进度条关键是知道nzSize在组件内部产生的影响。结合 components/progress/doc/index.zh-CN.md 的 API 表格与源码相关参数如下属性说明类型默认值全局配置[nzType]类型line \| circle \| dashboardline-[nzSize]尺寸default \| smalldefault✅可通过 NzConfig 全局覆盖[nzPercent]百分比number0-[nzShowInfo]是否显示进度数值或状态图标booleantrue✅[nzStatus]状态success \| exception \| active \| normal--[nzStrokeLinecap]进度条端点形状round \| squareround✅[nzStrokeColor]进度条颜色传入对象时为渐变string \| { from: string; to: string; direction: string; [percent: string]: string }-✅[nzSuccessPercent]已完成的分段百分比number0-[nzStrokeWidth]仅line进度条线的宽度单位 pxnumber8-[nzSteps]仅line进度条总共步数number--关键差异点nzSizesmall会同时压缩条高与字号。在 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 classant-progress-outer div classant-progress-inner div classant-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 }进度填充条的高度直接绑定strokeWidthsmall 时为 6px宽度按百分比绑定nzPercent。文本部分由progressInfoTemplate控制仅当nzShowInfo为 true 时才渲染.ant-progress-text且当状态为exception或success且未自定义nzFormat时用图标替代百分比文本。4.2 状态推断与图标映射nzStatus未显式指定时组件会根据百分比自动推断状态inferredStatus当nzPercent达到 100 且没有低于 100 的nzSuccessPercent时推断为success否则保持normal。因此示例 4[nzPercent]100 nzSizesmall会自动显示绿色对勾图标。图标映射见源码中的statusIconNameMapconst 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 nzSizesmall [nzShowInfo]false / /td /tr } /tbody /nz-table在表格单元格中通常建议关闭nzShowInfo或配合nzFormat用 Tooltip 展示精确数值避免 2em 宽度的数值文本挤压列宽。5.2 与nzFormat结合展示紧凑文本nz-progress [nzPercent]68 nzSizesmall [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: 2pxcomponents/progress/style/index.less相呼应非常适合在极窄区域内表达分档进度如3/5 步。nz-progress [nzPercent]60 nzSizesmall [nzSteps]5 /5.4 更窄的替代方案关闭文本信息如果连 6px 的条高加小号文本都嫌宽可以直接用[nzShowInfo]false只保留一条细线若希望进一步变细可显式指定[nzStrokeWidth]4因为它会优先于尺寸默认值生效源码中nzStrokeWidth || ...的判断顺序。六、常见问题small 会改变圆形/仪表盘进度条吗不会。nzSize的ant-progress-small类与默认 6px 线宽逻辑仅作用于nzTypeline圆形/仪表盘的小型化是通过[nzWidth]默认 132见 API 表格实现的参见同目录的 components/progress/demo/circle-mini.md 与 components/progress/demo/circle-mini.tsnzTypecircle [nzWidth]80即缩小版进度圈。为什么设置了nzSizesmall后条看起来没有明显变细检查是否同时显式传入了nzStrokeWidth——它会覆盖 small 的默认 6px。如何全局统一使用小型进度条通过 NzConfigService 的set(progress, { nzSize: small })一次性配置所有未显式指定nzSize的nz-progress都会生效。结语小型进度条是 ng-zorro-antd Progress 组件在空间受限场景下的标准答案通过nzSizesmall一行配置将线性进度条默认线宽从 8px 压缩到 6px、文本字号切换为小号并可自由叠加nzStatus、nzShowInfo、nzFormat、nzSteps等能力。理解其背后strokeWidthgetter 的默认值逻辑、ant-progress-small样式类与全局配置机制后你就能在表格、卡片、侧边栏等任何较狭窄的区域中稳定、精确地使用它。赞分享UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载相关推荐ng-zorro-antd Cascader 大小nzSize完全指南large / default / small 三种尺寸的配置与实现原理ng zorro antd Cascader 大小nzSize完全指南large / default / small 三种尺寸的配置与实现原理 导读本文UI组件前端ng-zorro-antd 表单尺寸nzSize使用指南从 API 到源码级原理ng zorro antd 表单尺寸nzSize使用指南从 API 到源码级原理 在 ng zorro antd 中表单Form是一套以 AngulUI组件前端ng-zorro-antd Button 按钮尺寸完全指南从 nzSize 三档尺寸到源码级原理ng zorro antd Button 按钮尺寸完全指南从 nzSize 三档尺寸到源码级原理 导读 本文围绕 ng zorro antdAngularUI组件前端上一篇3分钟搞定网页转Markdown这款开源工具让知识管理效率提升200%下一篇3步释放50%内存Mem Reduct让旧电脑秒变新机创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 ng-zorro-antd 小型进度条（nz-progress nzSize=“small“）完整使用指南：窄区域场景的尺寸适配与源码原理
UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载导读本文围绕 ng-zorro-antdAngular 版 Ant DesignProgress 进度条组件中的**小型进度条Mini size progress bar**展开讲解如何通过nzSizesmall让线性进度条适配较狭窄的容器区域如表格单元格、侧边栏卡片、紧凑型统计面板等。你将掌握小型进度条的最小可用写法、与常规尺寸的差异、状态组合用法、隐藏数值文本的技巧以及其背后在组件源码与 Less 样式中的尺寸实现原理可直接照搬到自己的 Angular 项目中。一、场景定位什么时候应该使用小型进度条官方文档components/progress/demo/line-mini.md对小型进度条的描述非常精炼——适合放在较狭窄的区域内Appropriate for a narrow area。这意味着它并不是一种全新的进度条类型而是标准线性进度条nzTypeline在空间受限环境下的紧凑形态。典型应用场景包括表格行内展示任务完成度、存储占用率侧边栏或卡片内的资源使用情况列表项右侧的轻量进度提示统计面板中需要并排展示多个指标时用于节省纵向与横向空间。与之相对常规尺寸进度条用于页面主体区域或需要突出显示进度信息的位置。二者的核心区别在于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 stylewidth: 170px; nz-progress [nzPercent]30 nzSizesmall / nz-progress [nzPercent]50 nzSizesmall nzStatusactive / nz-progress [nzPercent]70 nzSizesmall nzStatusexception / nz-progress [nzPercent]100 nzSizesmall / nz-progress [nzPercent]50 nzSizesmall [nzShowInfo]false / /div }) export class NzDemoProgressLineMiniComponent {}逐条解读五个用例的含义用例配置效果1[nzPercent]30 nzSizesmall30% 完成度的小型进度条默认状态normal2[nzPercent]50 nzSizesmall nzStatusactive50% 的进行中状态进度条带流动动画3[nzPercent]70 nzSizesmall nzStatusexception70% 的异常状态进度条与文本变为错误色4[nzPercent]100 nzSizesmall100% 完成自动推断为 success 状态并显示对勾图标5[nzPercent]50 nzSizesmall [nzShowInfo]false隐藏右侧数值文本只保留纯进度条最省空间几点实操要点外层容器宽度可控示例中外层div固定为170px这正是狭窄区域的直观体现——小型进度条本身的宽度依然是 100% 铺满父容器紧凑感来自整体条高变矮、字号变小而非宽度自适应逻辑。模块引入只需要引入NzProgressModule来源为ng-zorro-antd/progress见 components/progress/public-api.ts。可自由组合nzSize与nzPercent、nzStatus、nzShowInfo均可叠加使用官方示例刻意覆盖了 normal / active / exception / success自动推断四类状态。三、核心 API 对照small 尺寸到底改变了什么要理解小型进度条关键是知道nzSize在组件内部产生的影响。结合 components/progress/doc/index.zh-CN.md 的 API 表格与源码相关参数如下属性说明类型默认值全局配置[nzType]类型line \| circle \| dashboardline-[nzSize]尺寸default \| smalldefault✅可通过 NzConfig 全局覆盖[nzPercent]百分比number0-[nzShowInfo]是否显示进度数值或状态图标booleantrue✅[nzStatus]状态success \| exception \| active \| normal--[nzStrokeLinecap]进度条端点形状round \| squareround✅[nzStrokeColor]进度条颜色传入对象时为渐变string \| { from: string; to: string; direction: string; [percent: string]: string }-✅[nzSuccessPercent]已完成的分段百分比number0-[nzStrokeWidth]仅line进度条线的宽度单位 pxnumber8-[nzSteps]仅line进度条总共步数number--关键差异点nzSizesmall会同时压缩条高与字号。在 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 classant-progress-outer div classant-progress-inner div classant-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 }进度填充条的高度直接绑定strokeWidthsmall 时为 6px宽度按百分比绑定nzPercent。文本部分由progressInfoTemplate控制仅当nzShowInfo为 true 时才渲染.ant-progress-text且当状态为exception或success且未自定义nzFormat时用图标替代百分比文本。4.2 状态推断与图标映射nzStatus未显式指定时组件会根据百分比自动推断状态inferredStatus当nzPercent达到 100 且没有低于 100 的nzSuccessPercent时推断为success否则保持normal。因此示例 4[nzPercent]100 nzSizesmall会自动显示绿色对勾图标。图标映射见源码中的statusIconNameMapconst 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 nzSizesmall [nzShowInfo]false / /td /tr } /tbody /nz-table在表格单元格中通常建议关闭nzShowInfo或配合nzFormat用 Tooltip 展示精确数值避免 2em 宽度的数值文本挤压列宽。5.2 与nzFormat结合展示紧凑文本nz-progress [nzPercent]68 nzSizesmall [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: 2pxcomponents/progress/style/index.less相呼应非常适合在极窄区域内表达分档进度如3/5 步。nz-progress [nzPercent]60 nzSizesmall [nzSteps]5 /5.4 更窄的替代方案关闭文本信息如果连 6px 的条高加小号文本都嫌宽可以直接用[nzShowInfo]false只保留一条细线若希望进一步变细可显式指定[nzStrokeWidth]4因为它会优先于尺寸默认值生效源码中nzStrokeWidth || ...的判断顺序。六、常见问题small 会改变圆形/仪表盘进度条吗不会。nzSize的ant-progress-small类与默认 6px 线宽逻辑仅作用于nzTypeline圆形/仪表盘的小型化是通过[nzWidth]默认 132见 API 表格实现的参见同目录的 components/progress/demo/circle-mini.md 与 components/progress/demo/circle-mini.tsnzTypecircle [nzWidth]80即缩小版进度圈。为什么设置了nzSizesmall后条看起来没有明显变细检查是否同时显式传入了nzStrokeWidth——它会覆盖 small 的默认 6px。如何全局统一使用小型进度条通过 NzConfigService 的set(progress, { nzSize: small })一次性配置所有未显式指定nzSize的nz-progress都会生效。结语小型进度条是 ng-zorro-antd Progress 组件在空间受限场景下的标准答案通过nzSizesmall一行配置将线性进度条默认线宽从 8px 压缩到 6px、文本字号切换为小号并可自由叠加nzStatus、nzShowInfo、nzFormat、nzSteps等能力。理解其背后strokeWidthgetter 的默认值逻辑、ant-progress-small样式类与全局配置机制后你就能在表格、卡片、侧边栏等任何较狭窄的区域中稳定、精确地使用它。赞分享UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载相关推荐ng-zorro-antd Cascader 大小nzSize完全指南large / default / small 三种尺寸的配置与实现原理ng zorro antd Cascader 大小nzSize完全指南large / default / small 三种尺寸的配置与实现原理 导读本文UI组件前端ng-zorro-antd 表单尺寸nzSize使用指南从 API 到源码级原理ng zorro antd 表单尺寸nzSize使用指南从 API 到源码级原理 在 ng zorro antd 中表单Form是一套以 AngulUI组件前端ng-zorro-antd Button 按钮尺寸完全指南从 nzSize 三档尺寸到源码级原理ng zorro antd Button 按钮尺寸完全指南从 nzSize 三档尺寸到源码级原理 导读 本文围绕 ng zorro antdAngularUI组件前端上一篇3分钟搞定网页转Markdown这款开源工具让知识管理效率提升200%下一篇3步释放50%内存Mem Reduct让旧电脑秒变新机创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考