UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载CheckList任务清单是 ng-zorro-antd 内置的“特色组件”专门用于梳理复杂页面中的顺序流程当业务逻辑步骤较多、且带有较为强制的先后顺序控制时它可以把步骤以清单浮层的形式挂在页面角落用“进度条 步骤高亮 完成勾选”的方式引导用户一步步完成任务。读完本文你将掌握nz-check-list的全部输入/输出参数、NzItemProps数据结构、进度计算规则、关闭与“不再显示”的持久化方案以及基于仓库源码的自定义渲染与底层实现原理。何时使用 CheckList当当前页面业务逻辑过于复杂且带有较为强制的顺序流控制时可以使用 CheckList 来简化流程——这是组件官方文档给出的核心适用场景。典型表现包括新用户首次进入页面需要完成“填写资料 → 绑定手机 → 实名认证 → 完成”等多步操作后台运营页面要求按固定顺序完成配置项复杂的向导式页面希望在不遮挡主内容的前提下持续提示用户“下一步该做什么”。CheckList 的价值在于它把流程从“业务代码里写死的一串判断”抽象成数据驱动的清单——你只需要声明一个NzItemProps[]数组和一个“当前所处步骤”的下标组件就会自动渲染出步骤、进度和引导箭头并把每一步的点击动作交还给你的onClick回调。从源码结构看check-list.component.ts组件由nz-check-list-button悬浮按钮、nz-check-list-content清单内容面板两个内部组件配合NzPopoverModule浮层组成整体是一个“按钮 弹出面板”的复合结构。快速上手最简单的用法在模块中引入NzCheckListModule见 check-list.module.ts然后像下面这样声明数据和当前下标即可示例来自 demo/basic.tsimport { Component } from angular/core; import { NzCheckListModule, NzItemProps } from ng-zorro-antd/check-list; Component({ selector: nz-demo-check-list-basic, imports: [NzCheckListModule], template: nz-check-list [nzItems]nzItems [nzIndex]index / }) export class NzDemoCheckListBasicComponent { index 2; readonly nzItems: NzItemProps[] [ { description: step 1, checked: true, onClick: (item: NzItemProps) { this.index; item.checked true; } }, { description: step 2, onClick: (item: NzItemProps) { this.index; item.checked true; } }, { description: step 3, onClick: (item: NzItemProps) { this.index; item.checked true; } }, { description: step 4, onClick: (item: NzItemProps) { this.index; item.checked true; } } ]; }这就是最简单、最典型的“清单驱动”用法点击当前高亮步骤右侧的箭头 →onClick里把该步骤checked置为true、同时index→ 进度条前进、高亮下移。注意nzIndex默认从1开始对应第一步它表示当前用户所处的位置而不是数组下标。API 详解nz-check-list 组件参数完整参数表如下摘自 index.en-US.md参数说明类型默认值全局配置[nzItems]任务清单元素NzItemProps[][]-[nzVisible]显示任务清单控制浮层是否打开booleanfalse-[nzIndex]当前所处步骤位置number1-[nzProgress]是否显示任务进度条booleantrue-[nzTriggerRender]清单悬浮按钮的渲染模板TemplateRefvoid \| string--[nzTitle]清单面板标题的渲染模板TemplateRefvoid \| string--[nzFooter]清单面板底部的渲染模板TemplateRefvoid \| string--(nzHide)隐藏清单的回调EventEmitterbooleanfalse-几个关键点的源码印证见 check-list.component.ts组件使用 Angular 新一代input()/output()/computed()/linkedSignal()信号式 API 实现nzItems inputNzItemProps[]([])、nzVisible input(false)、nzIndex input(1)、nzProgress input(true)与文档默认值一一对应nzVisible通过linkedSignal与内部visible状态双向联动外部传入true打开浮层用户点击关闭后组件内部状态随之更新nzHide是组件唯一的输出事件类型为outputboolean()其回调值含义为“是否不再显示清单”若回调值为true你可以在回调中把标记写入LocalStorage从而避免再次显示清单——这是组件官方文档明确建议的“永久关闭”持久化方案。悬浮按钮上默认还会展示一个红色角标数字表示当前未完成checked为假的步骤数由unfinished计算属性得出this.nzItems().filter(item !item?.checked).length见 check-list.component.ts并用DecimalPipe格式化为整数。接口NzItemPropsNzItemProps是清单中每个步骤的数据结构定义见 typings.ts文档见 index.en-US.md属性说明类型默认值key清单元素的唯一标识string-description清单元素描述内容string-checked当前步骤是否已完成boolean-onClick点击该步骤时触发的方法(item: NzItemProps) void-使用要点key是当前项的唯一标识如果未设置则默认使用description作为 key见 check-list-content.component.tsfor循环的track表达式为item.key || item.description这也是官方文档在接口备注中明确说明的行为description必填渲染为步骤文字checked为true时该步骤左侧圆圈会变为对勾图标且不再触发onClick箭头只有**当前高亮步骤$index 1 nzIndex**才渲染右侧的“箭头”图标点击后调用item.onClick?.(item)见 check-list-content.component.ts。进度计算规则与“完成态”进度条百分比由内部progressPercent计算属性得出见 check-list-content.component.tsprotected progressPercent computed(() { const index Math.min(Math.max(this.index() - 1, 0), this.items().length); return (index / this.items().length) * 100; });换算成业务语言即进度 (nzIndex - 1) / 总步骤数 × 100%并做上下限裁剪不小于 0%、不超过 100%。组件测试 check-list.component.spec.ts 对这一规则做了精确验证2 个步骤、nzIndex 1时进度文本显示0%第一个步骤处于高亮ant-check-list-highlight且有 1 个箭头nzIndex 2、第一个步骤checked后进度显示50%第一个步骤呈现已勾选ant-check-list-checked、第二个步骤高亮两个步骤全部checked、nzIndex 3时进度条不再渲染进度已 100%转而展示“完成面板”ant-check-list-header-finish。当进度达到 100% 时面板头部会替换为完成态视图一个对勾图标 “You have successfully completed the list!”完成文案随 i18n 变化 一个“关闭”按钮点击后直接关闭浮层对应测试用例 “lose the list when you are finished”。关闭流程与“不再显示”持久化用户关闭清单时组件提供了一套完整的确认交互流程如下对应 check-list-content.component.ts 与测试用例 “actively close the list” / “actively close hidden lists”点击面板底部默认文案为 i18n 中的 “Check list is no longer required”可被nzFooter覆盖→ 面板切换为“确认关闭”视图确认视图包含标题“Do you want to close the list?”、确定 / 取消两个按钮以及一个可勾选的 checkbox——“No longer required to show”无需再次显示若勾选了 checkbox 再点“确定”组件会通过hide事件把true传给外层nzHide回调此时你应当把标记写入LocalStorage下次进入页面读取该标记不传入nzVisible/ 直接隐藏组件即可实现“永久不再打扰”未勾选时“确定”仅关闭浮层nzHide回调值为false。关闭后unfinished未完成数角标会随之消失。此外还有两条快捷关闭路径点击面板右上角的“向下”图标直接收起浮层完成态下面板也会显示关闭按钮。自定义渲染触发器、标题与底部三个可渲染属性nzTriggerRender/nzTitle/nzFooter的类型均为TemplateRefvoid | string即既可以直接传字符串文本也可以传模板引用组件内部通过nzStringTemplateOutlet指令统一支持两种形态见 check-list.component.ts 与 check-list-content.component.tsnzTriggerRender自定义悬浮按钮内容。不传时默认渲染“对勾图标 文案”文案来自 i18n 的checkList字段如 “Check List”传入字符串或模板后完全替换默认内容nzTitle面板标题。不传时默认使用 i18n 的checkList文案传入自定义文本/模板后替换nzFooter面板底部区域默认文案为 i18n 的checkListFooter“Check list is no longer required”点击底部同样触发关闭确认流程可自定义为任意文本或模板。check-list.component.spec.ts 中分别验证了三个属性的渲染结果传入字符串 “Check List” 后悬浮按钮、标题、底部区域的内边文本均正确替换为自定义内容。复杂场景用表单驱动全部参数官方提供了“复杂场景”示例 demo/custom.ts用ReactiveFormsModule表单把nzVisible、nzProgress、nzIndex、nzTriggerRender、nzTitle、nzFooter六个参数全部变成可实时调节的控件是理解各参数运行效果的绝佳演示form this.fb.group({ nzProgress: true, nzVisible: false, nzIndex: 0, nzTriggerRender: Open List, nzTitle: Customize task lists, nzFooter: Custom Footer Name });绑定方式nz-check-list [nzItems]nzItems [nzVisible]form.controls.nzVisible.value [nzIndex]form.controls.nzIndex.value || 0 [nzProgress]form.controls.nzProgress.value [nzTriggerRender]form.controls.nzTriggerRender.value [nzTitle]form.controls.nzTitle.value [nzFooter]form.controls.nzFooter.value (nzHide)hideCancel($event) /几点实践提示nzVisible与表单绑定后注意在nzHide回调里同步把表单值置回false示例中hideCancel的做法否则下次切换会与组件内部linkedSignal状态产生偏差nzIndex用nz-segmented提供 0N1 的档位用于直观观察不同“当前步骤”下高亮与进度的变化示例样式把nz-check-list设为position: absolute定位让悬浮按钮固定在页面一角——生产环境中这也是一种常见摆放方式。国际化与默认文案CheckList 的界面文案全部走 ng-zorro-antd 的 i18n 体系。组件通过NzI18nService订阅语言变化并读取CheckList语言包见 check-list.component.tsprivate i18n inject(NzI18nService); locale toSignalNzCheckListI18nInterface( this.i18n.localeChange.pipe(map(() this.i18n.getLocaleData(CheckList))), { requireSync: true } );以 languages/en_US.ts 为例语言包包含 7 个字段字段英文默认文案作用checkListCheck List悬浮按钮/面板默认标题checkListFinishYou have successfully completed the list!完成态标题checkListCloseClose完成态关闭按钮checkListFooterCheck list is no longer required默认底部文案checkListCheckDo you want to close the list?关闭确认标题ok/cancelOK / Cancel确认/取消按钮checkListCheckOtherNo longer required to show“不再显示”勾选文案目前 components/i18n/languages 目录下 60 余种语言如ar_EG、en_AU、es_ES等均已提供该字段跟随nz-i18n全局配置即可自动切换。底层实现与结构小结从源码结构看CheckList 由三个组件协作完成全部位于 components/check-list 目录NzCheckListComponentnz-check-list对外 API 的唯一入口负责信号输入输出、i18n 注入、未完成数计算并用NzPopoverModule把“触发器按钮”与“内容面板”组合成浮层——浮层触发方式为click、位置topRight、禁止点击外部关闭nzPopoverOverlayClickablefalse可见性由nzVisible/内部visible共同控制见 check-list.component.tsNzCheckListButtonComponentnz-check-list-button一个极简容器直接套用ant-btn ant-btn-primary按钮样式作为悬浮触发器见 check-list-button.component.tsNzCheckListContentComponentnz-check-list-content面板主体渲染标题/进度条/步骤列表/底部与关闭确认视图内部组合了NzProgressModule、NzCheckboxModule、NzButtonModule、NzIconModule等基础组件见 check-list-content.component.ts。其中悬浮按钮、完成态面板、步骤项等界面的样式类均以ant-check-list-*前缀命名实际视觉效果由 style 目录下的 LESS 样式文件定义。上述拆分方式与测试用例check-list.component.spec.ts 共 8 组用例覆盖基本渲染、可见性、步骤、进度、索引、关闭流程、自定义渲染等共同保证了组件在交互细节上的行为稳定。结语CheckList 是 ng-zorro-antd 中一个“小而美”的流程引导组件它把强顺序流程从业务代码中抽离为数据驱动清单用“进度 高亮 箭头”的直观 UI 降低用户理解成本又通过nzHide的布尔回调与LocalStorage组合提供了“不再打扰”的持久化关闭方案。实践中最关键的三点是维护好nzItems中每项的checked状态、正确推进nzIndex步数下标 1、以及按需使用三个自定义渲染插槽即可在复杂页面中快速落地一套清晰的任务引导流程。赞分享UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载相关推荐ng-zorro-antd CheckList 组件入门用 nz-check-list 构建步骤化任务清单ng zorro antd CheckList 组件入门用 nz check list 构建步骤化任务清单 CheckList任务清单是 ng zorroUI组件前端从源码到部署CrowdStrike CRT内部工作原理与自定义扩展终极指南从源码到部署CrowdStrike CRT内部工作原理与自定义扩展终极指南 CrowdStrike CRTCrowdStrike Reporting TooReact Effect 依赖收敛用原始值依赖取代对象依赖让副作用只在真正需要时触发React Effect 依赖收敛用原始值依赖取代对象依赖让副作用只在真正需要时触发 导读 本文围绕 OpenMontage 仓库中 Vercel ReacUI组件前端上一篇Linux终极指南3步用Bottles轻松运行Windows软件和游戏的完整教程下一篇UnstableFusion入门指南探索强大的Stable Diffusion桌面前端开启AI绘画之旅创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考