ng-zorro-antd Card 典型卡片实战：标题、内容与右上角操作区的完整实现-北京尧图网络

UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载nz-card是 ng-zorro-antd 中最基础的通用卡片容器常用于后台概览、列表分组与内容展示场景。本篇以官方「典型卡片Basic card」Demo 为骨架结合 card.component.ts 源码与 API 文档完整讲解nz-card的标题、内容区、右上角操作区三大组成要素并延伸覆盖全部核心参数、模板渲染机制与配套子组件读完即可在业务中直接落地一个标准可运行的卡片。何时使用典型卡片按官方组件文档的定位卡片是最基础的容器组件可承载文字、列表、图片、段落常用于后台概览页面参考 components/card/doc/index.zh-CN.md。而「典型卡片」正是它最朴素、最常用的一种形态一个标题一段内容一个右上角的操作区。官方 Demo 文档 basic.md 对它的描述只有两句话却精准概括了典型卡片的全部要素中文包含标题、内容、操作区域。英文A basic card containing a title, content and an extra corner content.也就是说一个典型卡片由三块构成标题title、内容content与右上角附加操作区extra corner content。下面我们从官方 Demo 代码出发看这三块如何组装。一个最小可运行的典型卡片官方 Demo 全解官方 Demo 的完整源码位于 components/card/demo/basic.ts没有任何删减import { Component } from angular/core; import { NzCardModule } from ng-zorro-antd/card; Component({ selector: nz-demo-card-basic, imports: [NzCardModule], template: nz-card stylewidth:300px; nzTitleCard title [nzExtra]extraTemplate pCard content/p pCard content/p pCard content/p /nz-card ng-template #extraTemplate aMore/a /ng-template , styles: p { margin: 0; } }) export class NzDemoCardBasicComponent {}逐行拆解这段 Demonz-card stylewidth:300px; ...卡片宽度固定为 300px。nz-card本身是块级容器宽度默认占满父容器需要时通过style或样式类控制尺寸。nzTitleCard title以字符串形式传入标题渲染在卡片顶部左侧。[nzExtra]extraTemplate以模板引用形式传入右上角操作区这里是一个aMore/a链接。卡片标签之间的三个pCard content/p通过内容投影ng-content进入卡片 body 区域。ng-template #extraTemplate模板引用变量供[nzExtra]引用操作区通常放置更多、编辑等链接或按钮。imports: [NzCardModule]组件以独立standalone方式引入 Card 模块即可使用nz-card及其全部配套指令与组件。Demo 中p { margin: 0; }只是让内容段落间距更紧凑属于演示样式不是卡片组件的必要配置。卡片内部骨架head、cover、body 与 actions 四段式结构要看懂典型卡片为什么长这样需要看nz-card的模板实现。card.component.ts 中卡片 DOM 被组织为清晰的四段式结构ant-card ├── ant-card-head 头部标题右上角操作区可选页签 │ ├── ant-card-head-title │ └── ant-card-extra ├── ant-card-cover 封面可选 ├── ant-card-body 内容主体 └── ant-card-actions 底部操作组可选源码中的关键渲染逻辑card.component.ts头部按需渲染只有满足nzTitle || nzExtra || listOfNzCardTabComponent三个条件之一时才会生成ant-card-head节点。典型卡片因为传入了nzTitle与nzExtra头部自然出现。标题与操作区左右分列ant-card-head-title渲染nzTitleant-card-extra渲染nzExtra两者包裹在ant-card-head-wrapper中实现标题居左、操作区居右上角的经典布局。封面可选传入nzCover时在头部下方渲染ant-card-cover区域。内容投影nz-card标签内的子内容如 Demo 中的三个p通过ng-content /投影进ant-card-body。底部操作组nzActions为数组时渲染ant-card-actions列表且每个操作项宽度均分源码第 72 行[style.width.%]100 / $count。组件的宿主类card.component.ts会根据输入状态动态切换ant-card-loading、ant-card-bordered、ant-card-hoverable、ant-card-small、ant-card-type-inner、ant-card-contain-grid、ant-card-contain-tabs等修饰类并支持 RTLant-card-rtl。nz-card API 全景参数、类型、默认值与全局配置官方 API 文档 components/card/doc/index.zh-CN.md 给出了nz-card的完整参数表这里完整继承并对照源码补充说明参数说明类型默认值支持全局配置[nzActions]卡片操作组位置在卡片底部ArrayTemplateRefvoid-[nzBodyStyle]内容区域自定义样式{ [key: string]: string }-[nzBordered]是否有边框booleantrue✅[nzCover]卡片封面TemplateRefvoid-[nzExtra]卡片右上角的操作区域string \| TemplateRefvoid-[nzHoverable]鼠标移过时可浮起booleanfalse✅[nzLoading]当卡片内容还在加载中时用 loading 展示一个占位booleanfalse[nzTitle]卡片标题string \| TemplateRefvoid-[nzType]卡片类型可设置为inner或不设置inner-[nzSize]卡片的尺寸default \| smalldefault✅对照 card.component.ts 的输入属性定义可以确认每个参数的实现细节nzBordered、nzLoading、nzHoverable使用booleanAttribute转换因此支持nzBorderedfalse这类字符串形式的属性写法也支持标准的[nzBordered]false绑定。nzBordered、nzHoverable、nzSize三个参数带有WithConfig()装饰器组件内部还通过onConfigChangeEventForComponent源码 card.component.ts 与 card.component.ts监听全局配置变化并触发变更检测。这意味着你可以通过 ng-zorro-antd 的全局配置服务配置模块名为card参见 docs/global-config.zh-CN.md统一设置这三个参数的默认值而不必在每个卡片上重复书写。nzType: string | inner | null源码中类型同时允许string文档约定值为inner或不设置。nzSize的底层类型为NzSizeDSType来自 core/types文档约束取值为default | small。标题与右上角操作区深入string 与 TemplateRef 双模式nzTitle与nzExtra的类型都是string | TemplateRefvoid这是 ng-zorro-antd 常见的字符串或模板双模式设计字符串模式nzTitleCard title适合静态标题。模板模式[nzExtra]extraTemplate适合需要交互或样式的操作区链接、按钮、图标等。模板内部通过*nzStringTemplateOutlet来自 core/outlet 模块统一渲染两种模式见 card.component.ts 与 card.component.ts。该指令会判断输入是字符串还是模板引用字符串直接文本渲染模板引用则展开为视图。典型卡片 Demo 正是这两种模式的组合示范标题用字符串右上角操作区用模板More 链接。在实际后台系统中这个右上角区域常被用来放置查看详情编辑更多操作等入口。内容区、封面与底部操作组典型卡片只展示了标题内容右上角操作区但nz-card还提供了三块可选的扩展区域内容区样式[nzBodyStyle]类型为{ [key: string]: string }直接以 style 对象应用到ant-card-body源码第 62 行。例如[nzBodyStyle]{ padding: 16px }。封面[nzCover]类型为TemplateRefvoid渲染在头部与 body 之间源码第 56-60 行常用于放置图片、视频等大视觉元素。底部操作组[nzActions]类型为ArrayTemplateRefvoid渲染在卡片底部操作项数量自动均分宽度源码第 69-77 行。例如nz-card [nzActions][action1, action2] 卡片内容 /nz-card ng-template #action1a (click)onEdit()编辑/a/ng-template ng-template #action2a (click)onDelete()删除/a/ng-template内容自由排版的相关实践可继续参考 flexible-content.md 与 in-column.md 两个 Demo。状态化交互边框、悬浮与加载占位典型卡片默认呈现带边框、无悬浮效果的静态形态但nz-card内置了三个高频状态参数nzBordered默认true控制是否显示边框。设置为false后卡片去掉ant-card-bordered修饰类呈现无边框的极简风格与 border-less.md Demo 一致。nzHoverable默认false鼠标移过时卡片浮起阴影效果。设为true后自动添加ant-card-hoverable类常用于可点击卡片。nzLoading默认false内容加载占位。为true时body 区域不再投影真实内容而是渲染一个骨架屏占位组件源码 card.component.tsnz-skeleton [nzActive]true [nzTitle]false [nzParagraph]{ rows: 4 } /即激活动画、不显示标题骨架、内容骨架 4 行与 loading.md Demo 行为一致。由于这三个参数中前两者支持全局配置在统一风格的后台系统中尤其好用。尺寸与 inner 类型卡片nzSize取default | small。设为small时卡片头部间距更紧凑对应ant-card-small类适合信息密度较高的场景。nzType设为inner时卡片呈现内嵌卡片风格ant-card-type-inner类头部带背景色常用于多层嵌套的内容分组参考 inner.md Demo。配套子组件meta、grid、tabnz-card常与三个配套子组件组合使用均随NzCardModule一并导出见 card.module.ts 与 public-api.tsnz-card-metacard-meta.component.ts卡片内的元信息区含头像/图标、标题与描述典型用于内容列表卡片参考 meta.md。参数说明类型默认值[nzAvatar]头像/图标TemplateRefvoid-[nzDescription]描述内容string \| TemplateRefvoid-[nzTitle]标题内容string \| TemplateRefvoid-[nz-card-grid]card-grid.directive.ts将卡片内容分隔为网格单元多个 grid 同时存在时自动触发ant-card-contain-grid样式参考 grid-card.md。参数说明类型默认值[nzHoverable]鼠标移过时可浮起booleantruenz-card-tabcard-tab.component.ts在卡片头部标题行下方插入页签标题区域配合nz-card形成带页签的卡片参考 tabs.md 与 simple.md。引入 NzCardModule 与更多 Demo 探索使用典型卡片前只需在组件中引入NzCardModule官方 Demo basic.ts 的做法import { Component } from angular/core; import { NzCardModule } from ng-zorro-antd/card; Component({ selector: app-basic-card, imports: [NzCardModule], template: nz-card stylewidth:300px; nzTitle卡片标题 [nzExtra]extra p卡片内容/p /nz-card ng-template #extraa更多/a/ng-template }) export class AppBasicCardComponent {}由于NzCardComponent等均为 standalone 组件见 card.component.ts 的imports配置也可以按需直接导入单个组件而不引入整个模块。components/card/demo/目录下还提供了simple、border-less、flexible-content、grid-card、in-column、inner、loading、meta、tabs共 10 个配套 Demo每个 Demo 均有.md说明与.ts源码覆盖了从典型卡片到高级组合形态的完整场景。若需了解全局配置nzBordered、nzHoverable、nzSize的默认值统一设置的详细用法可查阅 docs/global-config.zh-CN.md。掌握典型卡片的标题、内容与右上角操作区三要素之后即可在此基础上自由组合封面、底部操作组、meta 与页签快速搭建后台产品的高质量信息容器。赞分享UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载相关推荐ng-zorro-antd Drawer 抽屉右上角操作区nzExtra实战指南ng zorro antd Drawer 抽屉右上角操作区nzExtra实战指南本篇围绕 ng zorro antd 中 nz drawer 组件的 nzUI组件前端Ant Design Card 典型卡片实践标题、extra 操作区与 medium/small 双尺寸的完整解析Ant Design Card 典型卡片实践标题、extra 操作区与 medium/small 双尺寸的完整解析本篇基于 ant design 仓库中 C前端UI组件设计系统OpenCore引导配置架构设计从硬件兼容性到系统优化的完整方案解析OpenCore引导配置架构设计从硬件兼容性到系统优化的完整方案解析 OpenCore作为现代Hackintosh引导加载器的核心技术通过模块化架构和灵活的UI组件前端上一篇终极RQuickShare开发者指南从源码编译到自定义功能开发的完整教程下一篇Minecraft ReplayMod 终极指南轻松录制、编辑和分享你的游戏精彩瞬间创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

ng-zorro-antd Card 典型卡片实战：标题、内容与右上角操作区的完整实现

相关推荐

泛微E9与ERP物料主数据同步集成实战：接口调用与数据一致性

APP安全检测服务全解析：六大维度与合规要点

城市编码不能为空？开放平台接口联调中的MD5签名校验陷阱

更多资讯

Atlas 300V 24G上跑YOLO：从CANN环境到MindIE推理部署实战

Atlas 300V 24G推理卡部署YOLO全流程解析

Atlas 300V 24G部署YOLOv8：昇腾推理卡从ONNX到OM全流程实践

Atlas 300V部署YOLO实战：从模型转换到性能调优

让昇腾Atlas 300V跑通YOLOv5/YOLOv8：从模型转换到推理部署全指南

B_S仓库管理系统源码从解压到二次开发：环境搭建、库存逻辑与避坑指南

今日更新

AI元人文：从工具使用到思维重构的深度探索

Python+CNN车牌识别实战：从数据预处理到模型训练与部署

Vim基础操作全攻略：保存退出、模式切换与高频命令实战

本周精选

深入解析Transformer多头注意力机制与工程优化

OpenClaw 的 Skills 跑学习任务，模型通道改到 TaoToken 通道行不行？

ChatGPT报错Oops, an error occurred! 全链路排查指南

本月热门

基于YOLO的焊缝缺陷检测：从数据标注到工业部署全流程实践

分布式服务的决策记录

创业产品的首版范围

读完文章，想聊聊您的网站？