UI組件前端【免費下載鏈接】ng-zorro-antdAngular UI Component Library based on Ant Design項目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd點擊查看免費下載導(dǎo)讀本文圍繞 ng-zorro-antd基于 Ant Design 的 Angular UI 組件庫中nz-skeleton組件的復(fù)雜組合演示展開講解如何用一行模板同時組合頭像占位與多行段落占位構(gòu)建出貼合真實卡片/列表布局的加載骨架在此基礎(chǔ)上系統(tǒng)梳理 Skeleton 全部輸入屬性的默認(rèn)值推導(dǎo)邏輯、類型定義與測試驗證讓讀者既能直接上手也能深入理解組件內(nèi)部的布局決策原理。一、復(fù)雜組合演示一行模板的骨架屏在 ng-zorro-antd 倉庫的 Skeleton 演示目錄 中complex復(fù)雜的組合演示對應(yīng)兩份文件說明文檔 complex.md描述為更復(fù)雜的組合英文版明確點出主題 ——Complex combination with avatar and multiple paragraphs頭像 多段落的復(fù)雜組合演示源碼 complex.ts完整的可運行組件。其核心模板只有一行import { Component } from angular/core; import { NzSkeletonModule } from ng-zorro-antd/skeleton; Component({ selector: nz-demo-skeleton-complex, imports: [NzSkeletonModule], template: nz-skeleton [nzAvatar]true [nzParagraph]{ rows: 4 } / }) export class NzDemoSkeletonComplexComponent {}要點拆解輸入屬性傳入值作用[nzAvatar]true開啟頭像占位圖骨架屏切換為帶頭像布局宿主元素會追加ant-skeleton-with-avatar類[nzParagraph]{ rows: 4 }段落占位圖顯示 4 行覆蓋默認(rèn)行數(shù)[nzTitle]未傳默認(rèn)true標(biāo)題占位圖默認(rèn)顯示也就是說該演示渲染出的骨架包含三塊左側(cè)圓形頭像 右側(cè)標(biāo)題條 4 行段落條恰好模擬了一個典型的用戶卡片 / 評論列表項在加載中的形態(tài)。二、Skeleton 組件完整 API復(fù)雜組合背后可調(diào)的全部參數(shù)復(fù)雜組合演示只用了兩個屬性但nz-skeleton支持自由組合的全部輸入在 index.zh-CN.md 中有完整定義整理如下默認(rèn)值來自官方 API 表nz-skeleton屬性說明類型默認(rèn)值[nzActive]是否展示動畫效果booleanfalse[nzAvatar]是否顯示頭像占位圖boolean \| NzSkeletonAvatarfalse[nzLoading]為true時顯示占位圖反之直接展示子組件boolean-[nzParagraph]是否顯示段落占位圖boolean \| NzSkeletonParagraphtrue[nzTitle]是否顯示標(biāo)題占位圖boolean \| NzSkeletonTitletrue[nzRound]為true時段落和標(biāo)題顯示圓角booleanfalseNzSkeletonAvatar屬性說明類型默認(rèn)值size頭像占位圖大小number \| large \| small \| default-shape頭像形狀circle \| square-NzSkeletonTitle屬性說明類型默認(rèn)值width標(biāo)題占位圖寬度number \| string-NzSkeletonParagraph屬性說明類型默認(rèn)值rows段落占位圖行數(shù)number-width段落占位圖寬度傳數(shù)組時為對應(yīng)每行寬度傳單值時為最后一行的寬度number \| string \| Arraynumber \| string-上述對象類型的定義可在 skeleton.type.ts 中核實例如NzSkeletonParagraphWidth、NzSkeletonAvatarSize等別名均由源碼直接導(dǎo)出供業(yè)務(wù)代碼做類型標(biāo)注。三、源碼級原理組合時各占位元素如何取默認(rèn)值復(fù)雜組合看起來簡單但頭像、標(biāo)題、段落之間存在明顯的相互制約關(guān)系比如帶頭像時標(biāo)題應(yīng)該多寬、段落該有幾行。這些決策不在文檔里而在 skeleton.component.ts 的私有方法中L88-L121標(biāo)題寬度getTitleProps無頭像且有段落 → 默認(rèn)寬度38%有頭像且有段落 → 默認(rèn)寬度50%complex 演示即命中此分支其他情況 → 寬度為空交由 CSS 自然撐開。頭像形狀getAvatarProps有標(biāo)題且無段落 → 方形square其余情況含 complex 演示→ 圓形circle默認(rèn)尺寸為large。段落行數(shù)與寬度getParagraphProps無頭像或無標(biāo)題 → 默認(rèn)最后一行寬度61%無頭像且有標(biāo)題 → 默認(rèn) 3 行其余情況默認(rèn) 2 行——complex 演示傳入{ rows: 4 }正是覆蓋了這一默認(rèn)值。對象類型的輸入如{ rows: 4 }會通過getProps與上述基礎(chǔ)默認(rèn)值做淺合并即默認(rèn)值兜底 用戶配置覆蓋而rowsList、widthList會在ngOnInit與ngOnChanges中隨輸入變化重新計算L139-L156保證nzTitle/nzAvatar/nzParagraph任一變化都能即時反映到渲染結(jié)果上。在組件模板L38-L64中復(fù)雜組合的最終 DOM 結(jié)構(gòu)為ant-skeleton宿主 ├── ant-skeleton-header │ └── nz-skeleton-element[avatar] └── ant-skeleton-content ├── h3.ant-skeleton-title └── ul.ant-skeleton-paragraph ├── li第 1 行 ├── li第 2 行 ├── li第 3 行 └── li第 4 行四、測試用例佐證組合行為是被鎖死的契約上述默認(rèn)值推導(dǎo)并非猜測而是被測試用例顯式驗證過的行為。在 skeleton.spec.ts 中#nzTitle用例斷言有頭像 有段落時標(biāo)題寬度為50%無頭像 有段落時為38%無段落時寬度為空L51-L65#nzAvatar用例斷言有標(biāo)題 無段落時頭像為方形有段落時為圓形并驗證ant-skeleton-with-avatar宿主類L79-L108#nzParagraph用例斷言有頭像時默認(rèn) 2 行、無頭像時默認(rèn) 3 行且無頭像時最后一行寬度為61%L110-L126width傳數(shù)值如100會渲染為100px傳數(shù)組[200, 100px, 90%]時逐行生效L127-L152。因此復(fù)雜組合的展示效果可以精確預(yù)期圓形大號頭像、50% 寬標(biāo)題、4 行段落最后一行無自定義寬度時留空這正是 Ant Design 骨架屏在圖文混合場景下的標(biāo)準(zhǔn)形態(tài)。五、在同一演示目錄里還能組合出什么復(fù)雜組合并不是孤例Skeleton 組件還有多種組合玩法均可在 components/skeleton/demo 目錄下對照查看演示核心思路basic最簡單的默認(rèn)形態(tài)標(biāo)題 段落active在任意組合上疊加[nzActive]true開啟呼吸動畫complex頭像 多段落本文主角element使用nz-skeleton-element渲染單個元素button / avatar / input / imagenzType決定類型其nzSize、nzShape、nzActive參數(shù)見 API 文檔 中對應(yīng)小節(jié)list在列表組件中批量使用加載占位符children利用[nzLoading]在加載態(tài)與真實內(nèi)容之間切換六、實戰(zhàn)建議把復(fù)雜組合接入真實頁面在實際業(yè)務(wù)中復(fù)雜組合最常見的落地方式是配合nzLoading做加載態(tài)切換nz-skeleton [nzAvatar]true [nzParagraph]{ rows: 4 } [nzActive]true [nzLoading]loading !-- 加載完成后展示的真實內(nèi)容 -- nz-card nz-card-meta nzTitleCard title nzAvatar... nzDescriptionThis is the description / /nz-card /nz-skeletonloading為true時模板走if (nzLoading)分支渲染骨架為false時通過ng-content /直接投影真實內(nèi)容見 skeleton.component.ts L39-L63建議給骨架疊加[nzActive]true用閃爍動畫提示頁面仍在加載若段落末行需要漸隱效果可給nzParagraph傳入width數(shù)組精確控制每一行的寬度如{ rows: 4, width: [100%, 100%, 100%, 60%] }該組件只適合首次加載場景數(shù)據(jù)到達(dá)后應(yīng)及時切換回真實內(nèi)容。七、小結(jié)通過 complex 演示可以看到 ng-zorro-antd 的 Skeleton 用極簡的模板語法即可組合出頭像 標(biāo)題 多段落的完整骨架復(fù)雜組合的布局決策標(biāo)題寬度、頭像形狀、段落行數(shù)由組件內(nèi)部按輸入項組合關(guān)系自動推導(dǎo)并支持通過對象類型輸入精確覆蓋這些行為在 API 文檔、組件實現(xiàn) 與 測試用例 中三方印證是可放心依賴的穩(wěn)定契約。贊分享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 Skeleton 骨架屏基本用法、完整 API 與源碼級實現(xiàn)解析ng zorro antd Skeleton 骨架屏基本用法、完整 API 與源碼級實現(xiàn)解析 骨架屏Skeleton是現(xiàn)代前端頁面在異步數(shù)據(jù)加載期間展示UI組件前端網(wǎng)頁視頻沒有下載按鈕貓抓瀏覽器資源嗅探工具新手完整使用指南網(wǎng)頁視頻沒有下載按鈕貓抓瀏覽器資源嗅探工具新手完整使用指南 周四晚上十一點我盯著一個課程視頻的播放頁面發(fā)愁整門課我要反復(fù)看十幾遍可頁面上沒有下載按鈕右UI組件前端如何快速構(gòu)建開源AI智能眼鏡5個實戰(zhàn)技巧完整指南如何快速構(gòu)建開源AI智能眼鏡5個實戰(zhàn)技巧完整指南 OpenGlass是一個創(chuàng)新的開源項目讓你能夠以不到25美元的成本將普通眼鏡升級為功能強(qiáng)大的AI智能眼鏡。人工智能AI 應(yīng)用智能硬件本地部署可穿戴AI Agent上一篇OpenEBS存儲碎片優(yōu)化終極指南5個關(guān)鍵策略提升空間利用率下一篇How They SRE災(zāi)備方案eBay的Kafka容災(zāi)與恢復(fù)策略創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考