UI組件前端【免費下載鏈接】ng-zorro-antdAngular UI Component Library based on Ant Design項目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd點擊查看免費下載CheckList任務清單是 ng-zorro-antd 內(nèi)置的“特色組件”專門用于梳理復雜頁面中的順序流程當業(yè)務邏輯步驟較多、且?guī)в休^為強制的先后順序控制時它可以把步驟以清單浮層的形式掛在頁面角落用“進度條 步驟高亮 完成勾選”的方式引導用戶一步步完成任務。讀完本文你將掌握nz-check-list的全部輸入/輸出參數(shù)、NzItemProps數(shù)據(jù)結(jié)構(gòu)、進度計算規(guī)則、關(guān)閉與“不再顯示”的持久化方案以及基于倉庫源碼的自定義渲染與底層實現(xiàn)原理。何時使用 CheckList當當前頁面業(yè)務邏輯過于復雜且?guī)в休^為強制的順序流控制時可以使用 CheckList 來簡化流程——這是組件官方文檔給出的核心適用場景。典型表現(xiàn)包括新用戶首次進入頁面需要完成“填寫資料 → 綁定手機 → 實名認證 → 完成”等多步操作后臺運營頁面要求按固定順序完成配置項復雜的向?qū)巾撁嫦Ｍ诓徽趽踔鲀?nèi)容的前提下持續(xù)提示用戶“下一步該做什么”。CheckList 的價值在于它把流程從“業(yè)務代碼里寫死的一串判斷”抽象成數(shù)據(jù)驅(qū)動的清單——你只需要聲明一個NzItemProps[]數(shù)組和一個“當前所處步驟”的下標組件就會自動渲染出步驟、進度和引導箭頭并把每一步的點擊動作交還給你的onClick回調(diào)。從源碼結(jié)構(gòu)看check-list.component.ts組件由nz-check-list-button懸浮按鈕、nz-check-list-content清單內(nèi)容面板兩個內(nèi)部組件配合NzPopoverModule浮層組成整體是一個“按鈕 彈出面板”的復合結(jié)構(gòu)?？焖偕鲜肿詈唵蔚挠梅ㄔ谀K中引入NzCheckListModule見 check-list.module.ts然后像下面這樣聲明數(shù)據(jù)和當前下標即可示例來自 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; } } ]; }這就是最簡單、最典型的“清單驅(qū)動”用法點擊當前高亮步驟右側(cè)的箭頭 →onClick里把該步驟checked置為true、同時index→ 進度條前進、高亮下移。注意nzIndex默認從1開始對應第一步它表示當前用戶所處的位置而不是數(shù)組下標。API 詳解nz-check-list 組件參數(shù)完整參數(shù)表如下摘自 index.en-US.md參數(shù)說明類型默認值全局配置[nzItems]任務清單元素NzItemProps[][]-[nzVisible]顯示任務清單控制浮層是否打開booleanfalse-[nzIndex]當前所處步驟位置number1-[nzProgress]是否顯示任務進度條booleantrue-[nzTriggerRender]清單懸浮按鈕的渲染模板TemplateRefvoid \| string--[nzTitle]清單面板標題的渲染模板TemplateRefvoid \| string--[nzFooter]清單面板底部的渲染模板TemplateRefvoid \| string--(nzHide)隱藏清單的回調(diào)EventEmitterbooleanfalse-幾個關(guān)鍵點的源碼印證見 check-list.component.ts組件使用 Angular 新一代input()/output()/computed()/linkedSignal()信號式 API 實現(xiàn)nzItems inputNzItemProps[]([])、nzVisible input(false)、nzIndex input(1)、nzProgress input(true)與文檔默認值一一對應nzVisible通過linkedSignal與內(nèi)部visible狀態(tài)雙向聯(lián)動外部傳入true打開浮層用戶點擊關(guān)閉后組件內(nèi)部狀態(tài)隨之更新nzHide是組件唯一的輸出事件類型為outputboolean()其回調(diào)值含義為“是否不再顯示清單”若回調(diào)值為true你可以在回調(diào)中把標記寫入LocalStorage從而避免再次顯示清單——這是組件官方文檔明確建議的“永久關(guān)閉”持久化方案。懸浮按鈕上默認還會展示一個紅色角標數(shù)字表示當前未完成checked為假的步驟數(shù)由unfinished計算屬性得出this.nzItems().filter(item !item?.checked).length見 check-list.component.ts并用DecimalPipe格式化為整數(shù)。接口NzItemPropsNzItemProps是清單中每個步驟的數(shù)據(jù)結(jié)構(gòu)定義見 typings.ts文檔見 index.en-US.md屬性說明類型默認值key清單元素的唯一標識string-description清單元素描述內(nèi)容string-checked當前步驟是否已完成boolean-onClick點擊該步驟時觸發(fā)的方法(item: NzItemProps) void-使用要點key是當前項的唯一標識如果未設置則默認使用description作為 key見 check-list-content.component.tsfor循環(huán)的track表達式為item.key || item.description這也是官方文檔在接口備注中明確說明的行為description必填渲染為步驟文字checked為true時該步驟左側(cè)圓圈會變?yōu)閷磮D標且不再觸發(fā)onClick箭頭只有**當前高亮步驟$index 1 nzIndex**才渲染右側(cè)的“箭頭”圖標點擊后調(diào)用item.onClick?.(item)見 check-list-content.component.ts。進度計算規(guī)則與“完成態(tài)”進度條百分比由內(nèi)部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; });換算成業(yè)務語言即進度 (nzIndex - 1) / 總步驟數(shù) × 100%并做上下限裁剪不小于 0%、不超過 100%。組件測試 check-list.component.spec.ts 對這一規(guī)則做了精確驗證2 個步驟、nzIndex 1時進度文本顯示0%第一個步驟處于高亮ant-check-list-highlight且有 1 個箭頭nzIndex 2、第一個步驟checked后進度顯示50%第一個步驟呈現(xiàn)已勾選ant-check-list-checked、第二個步驟高亮兩個步驟全部checked、nzIndex 3時進度條不再渲染進度已 100%轉(zhuǎn)而展示“完成面板”ant-check-list-header-finish。當進度達到 100% 時面板頭部會替換為完成態(tài)視圖一個對勾圖標 “You have successfully completed the list!”完成文案隨 i18n 變化 一個“關(guān)閉”按鈕點擊后直接關(guān)閉浮層對應測試用例 “l(fā)ose the list when you are finished”。關(guān)閉流程與“不再顯示”持久化用戶關(guān)閉清單時組件提供了一套完整的確認交互流程如下對應 check-list-content.component.ts 與測試用例 “actively close the list” / “actively close hidden lists”點擊面板底部默認文案為 i18n 中的 “Check list is no longer required”可被nzFooter覆蓋→ 面板切換為“確認關(guān)閉”視圖確認視圖包含標題“Do you want to close the list?”、確定 / 取消兩個按鈕以及一個可勾選的 checkbox——“No longer required to show”無需再次顯示若勾選了 checkbox 再點“確定”組件會通過hide事件把true傳給外層nzHide回調(diào)此時你應當把標記寫入LocalStorage下次進入頁面讀取該標記不傳入nzVisible/ 直接隱藏組件即可實現(xiàn)“永久不再打擾”未勾選時“確定”僅關(guān)閉浮層nzHide回調(diào)值為false。關(guān)閉后unfinished未完成數(shù)角標會隨之消失。此外還有兩條快捷關(guān)閉路徑點擊面板右上角的“向下”圖標直接收起浮層完成態(tài)下面板也會顯示關(guān)閉按鈕。自定義渲染觸發(fā)器、標題與底部三個可渲染屬性nzTriggerRender/nzTitle/nzFooter的類型均為TemplateRefvoid | string即既可以直接傳字符串文本也可以傳模板引用組件內(nèi)部通過nzStringTemplateOutlet指令統(tǒng)一支持兩種形態(tài)見 check-list.component.ts 與 check-list-content.component.tsnzTriggerRender自定義懸浮按鈕內(nèi)容。不傳時默認渲染“對勾圖標 文案”文案來自 i18n 的checkList字段如 “Check List”傳入字符串或模板后完全替換默認內(nèi)容nzTitle面板標題。不傳時默認使用 i18n 的checkList文案傳入自定義文本/模板后替換nzFooter面板底部區(qū)域默認文案為 i18n 的checkListFooter“Check list is no longer required”點擊底部同樣觸發(fā)關(guān)閉確認流程可自定義為任意文本或模板。check-list.component.spec.ts 中分別驗證了三個屬性的渲染結(jié)果傳入字符串 “Check List” 后懸浮按鈕、標題、底部區(qū)域的內(nèi)邊文本均正確替換為自定義內(nèi)容。復雜場景用表單驅(qū)動全部參數(shù)官方提供了“復雜場景”示例 demo/custom.ts用ReactiveFormsModule表單把nzVisible、nzProgress、nzIndex、nzTriggerRender、nzTitle、nzFooter六個參數(shù)全部變成可實時調(diào)節(jié)的控件是理解各參數(shù)運行效果的絕佳演示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回調(diào)里同步把表單值置回false示例中hideCancel的做法否則下次切換會與組件內(nèi)部linkedSignal狀態(tài)產(chǎn)生偏差nzIndex用nz-segmented提供 0N1 的檔位用于直觀觀察不同“當前步驟”下高亮與進度的變化示例樣式把nz-check-list設為position: absolute定位讓懸浮按鈕固定在頁面一角——生產(chǎn)環(huán)境中這也是一種常見擺放方式。國際化與默認文案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!完成態(tài)標題checkListCloseClose完成態(tài)關(guān)閉按鈕checkListFooterCheck list is no longer required默認底部文案checkListCheckDo you want to close the list?關(guān)閉確認標題ok/cancelOK / Cancel確認/取消按鈕checkListCheckOtherNo longer required to show“不再顯示”勾選文案目前 components/i18n/languages 目錄下 60 余種語言如ar_EG、en_AU、es_ES等均已提供該字段跟隨nz-i18n全局配置即可自動切換。底層實現(xiàn)與結(jié)構(gòu)小結(jié)從源碼結(jié)構(gòu)看CheckList 由三個組件協(xié)作完成全部位于 components/check-list 目錄NzCheckListComponentnz-check-list對外 API 的唯一入口負責信號輸入輸出、i18n 注入、未完成數(shù)計算并用NzPopoverModule把“觸發(fā)器按鈕”與“內(nèi)容面板”組合成浮層——浮層觸發(fā)方式為click、位置topRight、禁止點擊外部關(guān)閉nzPopoverOverlayClickablefalse可見性由nzVisible/內(nèi)部visible共同控制見 check-list.component.tsNzCheckListButtonComponentnz-check-list-button一個極簡容器直接套用ant-btn ant-btn-primary按鈕樣式作為懸浮觸發(fā)器見 check-list-button.component.tsNzCheckListContentComponentnz-check-list-content面板主體渲染標題/進度條/步驟列表/底部與關(guān)閉確認視圖內(nèi)部組合了NzProgressModule、NzCheckboxModule、NzButtonModule、NzIconModule等基礎組件見 check-list-content.component.ts。其中懸浮按鈕、完成態(tài)面板、步驟項等界面的樣式類均以ant-check-list-*前綴命名實際視覺效果由 style 目錄下的 LESS 樣式文件定義。上述拆分方式與測試用例check-list.component.spec.ts 共 8 組用例覆蓋基本渲染、可見性、步驟、進度、索引、關(guān)閉流程、自定義渲染等共同保證了組件在交互細節(jié)上的行為穩(wěn)定。結(jié)語CheckList 是 ng-zorro-antd 中一個“小而美”的流程引導組件它把強順序流程從業(yè)務代碼中抽離為數(shù)據(jù)驅(qū)動清單用“進度 高亮 箭頭”的直觀 UI 降低用戶理解成本又通過nzHide的布爾回調(diào)與LocalStorage組合提供了“不再打擾”的持久化關(guān)閉方案。實踐中最關(guān)鍵的三點是維護好nzItems中每項的checked狀態(tài)、正確推進nzIndex步數(shù)下標 1、以及按需使用三個自定義渲染插槽即可在復雜頁面中快速落地一套清晰的任務引導流程。贊分享UI組件前端【免費下載鏈接】ng-zorro-antdAngular UI Component Library based on Ant Design項目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd點擊查看免費下載相關(guān)推薦ng-zorro-antd CheckList 組件入門用 nz-check-list 構(gòu)建步驟化任務清單ng zorro antd CheckList 組件入門用 nz check list 構(gòu)建步驟化任務清單 CheckList任務清單是 ng zorroUI組件前端從源碼到部署CrowdStrike CRT內(nèi)部工作原理與自定義擴展終極指南從源碼到部署CrowdStrike CRT內(nèi)部工作原理與自定義擴展終極指南 CrowdStrike CRTCrowdStrike Reporting TooReact Effect 依賴收斂用原始值依賴取代對象依賴讓副作用只在真正需要時觸發(fā)React Effect 依賴收斂用原始值依賴取代對象依賴讓副作用只在真正需要時觸發(fā) 導讀 本文圍繞 OpenMontage 倉庫中 Vercel ReacUI組件前端上一篇Linux終極指南3步用Bottles輕松運行Windows軟件和游戲的完整教程下一篇UnstableFusion入門指南探索強大的Stable Diffusion桌面前端開啟AI繪畫之旅創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考