UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载导读本文围绕 ng-zorro-antd基于 Ant Design 的 Angular UI 组件库中nz-skeleton组件的复杂组合演示展开讲解如何用一行模板同时组合头像占位与多行段落占位构建出贴合真实卡片/列表布局的加载骨架在此基础上系统梳理 Skeleton 全部输入属性的默认值推导逻辑、类型定义与测试验证让读者既能直接上手也能深入理解组件内部的布局决策原理。一、复杂组合演示一行模板的骨架屏在 ng-zorro-antd 仓库的 Skeleton 演示目录 中complex复杂的组合演示对应两份文件说明文档 complex.md描述为更复杂的组合英文版明确点出主题 ——Complex combination with avatar and multiple paragraphs头像 多段落的复杂组合演示源码 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 行覆盖默认行数[nzTitle]未传默认true标题占位图默认显示也就是说该演示渲染出的骨架包含三块左侧圆形头像 右侧标题条 4 行段落条恰好模拟了一个典型的用户卡片 / 评论列表项在加载中的形态。二、Skeleton 组件完整 API复杂组合背后可调的全部参数复杂组合演示只用了两个属性但nz-skeleton支持自由组合的全部输入在 index.zh-CN.md 中有完整定义整理如下默认值来自官方 API 表nz-skeleton属性说明类型默认值[nzActive]是否展示动画效果booleanfalse[nzAvatar]是否显示头像占位图boolean \| NzSkeletonAvatarfalse[nzLoading]为true时显示占位图反之直接展示子组件boolean-[nzParagraph]是否显示段落占位图boolean \| NzSkeletonParagraphtrue[nzTitle]是否显示标题占位图boolean \| NzSkeletonTitletrue[nzRound]为true时段落和标题显示圆角booleanfalseNzSkeletonAvatar属性说明类型默认值size头像占位图大小number \| large \| small \| default-shape头像形状circle \| square-NzSkeletonTitle属性说明类型默认值width标题占位图宽度number \| string-NzSkeletonParagraph属性说明类型默认值rows段落占位图行数number-width段落占位图宽度传数组时为对应每行宽度传单值时为最后一行的宽度number \| string \| Arraynumber \| string-上述对象类型的定义可在 skeleton.type.ts 中核实例如NzSkeletonParagraphWidth、NzSkeletonAvatarSize等别名均由源码直接导出供业务代码做类型标注。三、源码级原理组合时各占位元素如何取默认值复杂组合看起来简单但头像、标题、段落之间存在明显的相互制约关系比如带头像时标题应该多宽、段落该有几行。这些决策不在文档里而在 skeleton.component.ts 的私有方法中L88-L121标题宽度getTitleProps无头像且有段落 → 默认宽度38%有头像且有段落 → 默认宽度50%complex 演示即命中此分支其他情况 → 宽度为空交由 CSS 自然撑开。头像形状getAvatarProps有标题且无段落 → 方形square其余情况含 complex 演示→ 圆形circle默认尺寸为large。段落行数与宽度getParagraphProps无头像或无标题 → 默认最后一行宽度61%无头像且有标题 → 默认 3 行其余情况默认 2 行——complex 演示传入{ rows: 4 }正是覆盖了这一默认值。对象类型的输入如{ rows: 4 }会通过getProps与上述基础默认值做浅合并即默认值兜底 用户配置覆盖而rowsList、widthList会在ngOnInit与ngOnChanges中随输入变化重新计算L139-L156保证nzTitle/nzAvatar/nzParagraph任一变化都能即时反映到渲染结果上。在组件模板L38-L64中复杂组合的最终 DOM 结构为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 行四、测试用例佐证组合行为是被锁死的契约上述默认值推导并非猜测而是被测试用例显式验证过的行为。在 skeleton.spec.ts 中#nzTitle用例断言有头像 有段落时标题宽度为50%无头像 有段落时为38%无段落时宽度为空L51-L65#nzAvatar用例断言有标题 无段落时头像为方形有段落时为圆形并验证ant-skeleton-with-avatar宿主类L79-L108#nzParagraph用例断言有头像时默认 2 行、无头像时默认 3 行且无头像时最后一行宽度为61%L110-L126width传数值如100会渲染为100px传数组[200, 100px, 90%]时逐行生效L127-L152。因此复杂组合的展示效果可以精确预期圆形大号头像、50% 宽标题、4 行段落最后一行无自定义宽度时留空这正是 Ant Design 骨架屏在图文混合场景下的标准形态。五、在同一演示目录里还能组合出什么复杂组合并不是孤例Skeleton 组件还有多种组合玩法均可在 components/skeleton/demo 目录下对照查看演示核心思路basic最简单的默认形态标题 段落active在任意组合上叠加[nzActive]true开启呼吸动画complex头像 多段落本文主角element使用nz-skeleton-element渲染单个元素button / avatar / input / imagenzType决定类型其nzSize、nzShape、nzActive参数见 API 文档 中对应小节list在列表组件中批量使用加载占位符children利用[nzLoading]在加载态与真实内容之间切换六、实战建议把复杂组合接入真实页面在实际业务中复杂组合最常见的落地方式是配合nzLoading做加载态切换nz-skeleton [nzAvatar]true [nzParagraph]{ rows: 4 } [nzActive]true [nzLoading]loading !-- 加载完成后展示的真实内容 -- nz-card nz-card-meta nzTitleCard title nzAvatar... nzDescriptionThis is the description / /nz-card /nz-skeletonloading为true时模板走if (nzLoading)分支渲染骨架为false时通过ng-content /直接投影真实内容见 skeleton.component.ts L39-L63建议给骨架叠加[nzActive]true用闪烁动画提示页面仍在加载若段落末行需要渐隐效果可给nzParagraph传入width数组精确控制每一行的宽度如{ rows: 4, width: [100%, 100%, 100%, 60%] }该组件只适合首次加载场景数据到达后应及时切换回真实内容。七、小结通过 complex 演示可以看到 ng-zorro-antd 的 Skeleton 用极简的模板语法即可组合出头像 标题 多段落的完整骨架复杂组合的布局决策标题宽度、头像形状、段落行数由组件内部按输入项组合关系自动推导并支持通过对象类型输入精确覆盖这些行为在 API 文档、组件实现 与 测试用例 中三方印证是可放心依赖的稳定契约。赞分享UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载相关推荐ng-zorro-antd Skeleton 骨架屏基本用法、完整 API 与源码级实现解析ng zorro antd Skeleton 骨架屏基本用法、完整 API 与源码级实现解析 骨架屏Skeleton是现代前端页面在异步数据加载期间展示UI组件前端网页视频没有下载按钮猫抓浏览器资源嗅探工具新手完整使用指南网页视频没有下载按钮猫抓浏览器资源嗅探工具新手完整使用指南 周四晚上十一点我盯着一个课程视频的播放页面发愁整门课我要反复看十几遍可页面上没有下载按钮右UI组件前端如何快速构建开源AI智能眼镜5个实战技巧完整指南如何快速构建开源AI智能眼镜5个实战技巧完整指南 OpenGlass是一个创新的开源项目让你能够以不到25美元的成本将普通眼镜升级为功能强大的AI智能眼镜。人工智能AI 应用智能硬件本地部署可穿戴AI Agent上一篇OpenEBS存储碎片优化终极指南5个关键策略提升空间利用率下一篇How They SRE灾备方案eBay的Kafka容灾与恢复策略创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考