UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载卡片Card是后台概览页面中最常用的通用容器可承载文字、列表、图片、段落。但当单张卡片需要容纳多个分类的内容例如文章 / 应用 / 项目三类信息时把Tabs页签直接塞进卡片内容区并不优雅——ng-zorro-antd 为此专门提供了nz-card-tab子组件用于把页签标题区嵌入卡片头部从而让一张卡片同时具备页签导航与内容承载能力。本文基于当前仓库中 tabs 演示文档 与对应 演示代码结合 Card 组件源码完整讲解带页签卡片的写法、底层渲染机制与进阶用法。读完本文你将能独立写出标题 右上角操作区 页签导航 动态内容的复合卡片并理解其背后的实现原理。功能定位页签不是内容而是卡片的第二行头部在 ng-zorro-antd 的卡片设计中卡片结构分为三层头部标题nzTitle 右上角操作区nzExtra、封面nzCover、内容体ant-card-body。官方对nz-card-tab的定位是分隔页签标题区域见 Card API 文档也就是说页签区域被设计为卡片头部的一部分而不是普通内容。这与 tabs 演示文档的说明完全吻合zh-CN可承载更多内容。en-USMore content can be hosted.其核心价值在于页签导航固定在卡片头部内容区只负责展示当前页签对应的内容从而在有限空间内承载更多信息尤其适合后台概览页中多类数据共处一卡的场景。最小可用示例三行代码完成页签卡片先看 tabs 演示 中第一个卡片的完整写法import { Component } from angular/core; import { NzCardModule } from ng-zorro-antd/card; import { NzTabsModule } from ng-zorro-antd/tabs; Component({ selector: nz-demo-card-tabs, imports: [NzCardModule, NzTabsModule], template: nz-card stylewidth: 100%; nzTitleCard title [nzExtra]extraTemplate nz-card-tab nz-tabs nzSizelarge [(nzSelectedIndex)]index1 nz-tab nzTitletab1 / nz-tab nzTitletab2 / /nz-tabs /nz-card-tab content{{ index1 }} /nz-card ng-template #extraTemplate aMore/a /ng-template br / br / }) export class NzDemoCardTabsComponent { index1 0; }关键点只有三个外层nz-card照常使用这里同时传了nzTitleCard title与[nzExtra]extraTemplate构成完整的卡片头部页签容器卡片内部放一个nz-card-tab再把nz-tabs放进去——nz-card-tab是一个透传壳内部渲染ng-content投影内容内容联动卡片内容区直接写content{{ index1 }}通过[(nzSelectedIndex)]index1的双向绑定让页签切换实时驱动内容区文本实现页签决定内容的效果。注意imports: [NzCardModule, NzTabsModule]——这是 Angular 独立组件Standalone的写法需要同时引入NzCardModule与NzTabsModule二者缺一不可。如果使用 NgModule 传统写法则应在模块的imports数组中同时声明这两个模块。进阶示例多页签 独立卡片第二个卡片演示了不设置标题、只靠页签导航的多页签形态同样来自 tabs.tsimport { Component } from angular/core; import { NzCardModule } from ng-zorro-antd/card; import { NzTabsModule } from ng-zorro-antd/tabs; Component({ selector: nz-demo-card-tabs, imports: [NzCardModule, NzTabsModule], template: nz-card stylewidth: 100%; nz-card-tab nz-tabs nzSizelarge [(nzSelectedIndex)]index2 nz-tab nzTitlearticle / nz-tab nzTitleapp / nz-tab nzTitleproject / /nz-tabs /nz-card-tab content{{ index2 }} /nz-card }) export class NzDemoCardTabsComponent { index2 0; }与第一个示例的区别在于没有nzTitle与nzExtra卡片头部完全由页签区域占据页签数量扩展到 3 个article/app/project内容区依旧用content{{ index2 }}与当前选中索引联动两个卡片之间用br /分隔演示同一页面多张页签卡片并存的布局。从组件源码看NzDemoCardTabsComponent中index1、index2都初始化为0即默认选中第一个页签这也对应了nz-tabs组件默认nzSelectedIndex为0的行为。源码剖析nz-card-tab 到底做了什么nz-card-tab的整套机制在源码中非常轻量理解它能帮你更好地掌握投影边界。先看 card-tab.component.ts 的完整实现Component({ selector: nz-card-tab, exportAs: nzCardTab, encapsulation: ViewEncapsulation.None, template: ng-template ng-content / /ng-template }) export class NzCardTabComponent { ViewChild(TemplateRef, { static: true }) template!: TemplateRefvoid; }可以看到NzCardTabComponent本身不渲染任何真实 DOM 节点它把投影进来的内容即nz-tabs包进一个ng-template并通过ViewChild(TemplateRef, ...)拿到这个模板引用等待父组件按需插入。真正安放页签的是 card.component.ts 中的头部模板if (nzTitle || nzExtra || listOfNzCardTabComponent) { div classant-card-head div classant-card-head-wrapper if (nzTitle) { div classant-card-head-title ng-container *nzStringTemplateOutletnzTitle{{ nzTitle }}/ng-container /div } if (nzExtra) { div classant-card-extra ng-container *nzStringTemplateOutletnzExtra{{ nzExtra }}/ng-container /div } /div if (listOfNzCardTabComponent) { ng-template [ngTemplateOutlet]listOfNzCardTabComponent.template / } /div }这段模板揭示了三个重要事实页签进入卡片头部ContentChild(NzCardTabComponent, ...)捕获的listOfNzCardTabComponent出现在ant-card-head内部且位于ant-card-head-wrapper标题 extra 所在行之下——所以视觉上呈现第一行标题、第二行页签的双行头部结构头部显隐联动只要存在nzTitle、nzExtra或listOfNzCardTabComponent三者之一头部整块就会渲染这解释了为何第二个示例没有标题也能正常显示页签头部宿主类标记在host绑定中有[class.ant-card-contain-tabs]: !!listOfNzCardTabComponent当卡片内含nz-card-tab时ant-card根节点会追加ant-card-contain-tabs类样式层据此调整头部与内容区的布局间距。与 nzTitle / nzExtra / nzLoading 的组合使用带页签的卡片可以无压力地与 Card 组件的其他头部能力组合这正是 tabs.md 演示的核心价值所在。结合 Card API 文档 与 card.component.ts 的输入属性可组合的配置包括配置类型默认值在页签卡片中的典型用法nzTitlestring \| TemplateRefvoid-卡片第一行标题页签在其下方nzExtrastring \| TemplateRefvoid-右上角操作区如More链接、操作按钮nzSizedefault \| smalldefault卡片尺寸支持全局配置nzBorderedbooleantrue是否有边框支持全局配置nzHoverablebooleanfalse鼠标移过浮起效果支持全局配置nzLoadingbooleanfalse内容加载占位注意加载时页签仍会保留只有内容体被nz-skeleton替换nzTypeinner-内部卡片类型可套在普通卡片里展示层级结构值得特别说明nzLoading的交互细节从 card.component.ts 的模板可以看出nzLoading为true时只有.ant-card-body里的内容被替换为nz-skeleton [nzActive]true [nzTitle]false [nzParagraph]{ rows: 4 } /而头部含页签不受影响——这意味着在数据异步加载期间用户仍能看到页签导航这是页签属于头部这一设计带来的天然体验优势。关于nzTypeinner它与页签卡片是正交的两个特性。inner类型用于卡片套卡片的多层级结构参考 内部卡片演示而页签卡片解决的是单卡多分区问题两者可以视业务需要叠加使用。页签卡片的样式与布局要点从 card.component.ts 的宿主绑定可以看到页签卡片会同时命中以下根节点类ant-card卡片基础类ant-card-contain-tabs含页签标记用于调整头部下边框与页签的衔接样式视配置追加ant-card-bordered/ant-card-hoverable/ant-card-small等。样式源码位于 style 目录 下如index.less等其中针对ant-card-contain-tabs的规则负责让页签行与卡片头部视觉上融为一体页签默认使用nzSizelarge的大号尺寸以匹配卡片头部的垂直节奏这也是 demo 中两个示例都设置nzSizelarge的原因。另外注意demo 中nz-card stylewidth: 100%;显式设置了宽度。页签卡片通常承载较多内容建议在真实布局中通过外层栅格如nz-col/nz-row或width显式约束卡片宽度避免页签过多时在窄容器中被挤压换行。完整实战清单从零搭建一个页签卡片综合以上内容给出一个可直接运行的完整组件示例三页签 标题 操作区import { Component } from angular/core; import { NzCardModule } from ng-zorro-antd/card; import { NzTabsModule } from ng-zorro-antd/tabs; Component({ selector: app-tab-card, imports: [NzCardModule, NzTabsModule], template: nz-card stylewidth: 100%; nzTitle数据概览 [nzExtra]extraTpl nzHoverable nz-card-tab nz-tabs nzSizelarge [(nzSelectedIndex)]activeIndex nz-tab nzTitle文章 / nz-tab nzTitle应用 / nz-tab nzTitle项目 / /nz-tabs /nz-card-tab p当前页签索引{{ activeIndex }}/p p此处可按 activeIndex 渲染对应页签的真实内容。/p /nz-card ng-template #extraTpl a更多数据/a /ng-template }) export class TabCardComponent { activeIndex 0; }要点回顾引入NzCardModule与NzTabsModule在nz-card内用nz-card-tab包裹nz-tabs通过[(nzSelectedIndex)]双向绑定页签索引驱动内容区渲染nzTitle/nzExtra与页签可同时存在构成完整的复合卡片头部真实业务中可将内容区替换为switch (activeIndex)或子组件投影实现多分类数据的单卡承载。小结带页签的卡片是 ng-zorro-antd Card 组件头部扩展能力的典型实践nz-card-tab作为一个零 DOM 的透传组件把Tabs的渲染时机与位置完全交给 Card 头部模板控制从而在保留nzTitle、nzExtra等头部能力的同时为卡片增加了第二行导航让单张卡片能够承载更多内容。这套机制既适用于后台概览页的多分类数据展示也适用于详情页内的分区导航。想深入了解 Card 组件的全部 API 与配置项可继续阅读 Card 官方文档并对照 basic 演示、meta 演示 等其它示例全面掌握卡片容器的各种形态。赞分享UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载相关推荐OpenCore引导配置架构设计从硬件兼容性到系统优化的完整方案解析OpenCore引导配置架构设计从硬件兼容性到系统优化的完整方案解析 OpenCore作为现代Hackintosh引导加载器的核心技术通过模块化架构和灵活的UI组件前端OCRmyPDF 快速上手如何把扫描件变成可搜索 PDF 并自动归档OCRmyPDF 快速上手如何把扫描件变成可搜索 PDF 并自动归档 当你手里有一堆扫描出来的 PDF想搜个词、复制段文字却搜不到、选不中时问题往往出在它UI组件前端Ant Design Tabs 卡片式页签Card Tabs实战指南从 typecard 到可编辑卡片与容器顶部应用Ant Design Tabs 卡片式页签Card Tabs实战指南从 typecard 到可编辑卡片与容器顶部应用 卡片式页签Card Tabs前端UI组件设计系统上一篇终极指南如何完全利用GitHub Pages CDN和gzip压缩优化单页应用性能下一篇Claude Squad配置文件详解每个参数的作用和最佳设置创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考