UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载导读本文聚焦 ng-zorro-antd 中 Collapse折叠面板组件的「幽灵模式Ghost」即通过nzGhost属性让折叠面板的背景完全透明化、边框消失使其可以自然融入卡片、页面或自定义容器等任何背景环境中。读完本文你将掌握幽灵折叠面板的完整配置用法、与无边框Borderless模式的区别、全局默认配置方法以及该特性在组件源码与 Less 样式中的底层实现原理。幽灵折叠面板是什么在 ng-zorro-antd 的 Collapse 组件文档 中幽灵模式Ghost Collapse的官方定义是将折叠面板的背景变成透明。对应的英文描述为Making collapses background to transparent.见 ghost.md。普通折叠面板默认带有一层背景色来自主题变量collapse-header-bg和完整边框而开启幽灵模式后折叠面板整体变为背景透明且无边框视觉上与所在容器融为一体仅保留可点击的标题文字与展开内容适合用在背景色已由父容器提供、不希望折叠面板自身自带盒子感的场景。快速上手在模板中使用 nzGhost幽灵模式的接入非常简单只需在nz-collapse组件上添加布尔属性nzGhost无需任何额外配置。官方演示代码见 components/collapse/demo/ghost.ts核心模板如下import { Component } from angular/core; import { NzCollapseModule } from ng-zorro-antd/collapse; Component({ selector: nz-demo-collapse-ghost, imports: [NzCollapseModule], template: nz-collapse nzGhost for (panel of panels; track panel) { nz-collapse-panel [nzHeader]panel.name [nzActive]panel.active p stylemargin:0; A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world. /p /nz-collapse-panel } /nz-collapse }) export class NzDemoCollapseGhostComponent { readonly panels [ { active: true, name: This is panel header 1 }, { active: false, name: This is panel header 2 }, { active: false, name: This is panel header 3 } ]; }要点说明组件模块演示中使用的是NzCollapseModule在组件imports中引入即可在模块式NgModule应用中则将其加入对应模块的导入列表。属性写法nzGhost是布尔属性模板中直接书写即为开启传入[nzGhost]false则关闭默认值为false。面板内容nz-collapse-panel的nzHeader用于设置标题支持字符串或TemplateRefnzActive用于控制面板初始展开状态可双向绑定详见后文 API。内容布局幽灵模式下展开内容默认在垂直方向padding-block保留一定内边距水平方向则与容器对齐因此示例中内容区的margin:0与默认内边距配合即可获得整洁的排版。API 详解nzGhost 与相关配置nz-collapse 上的 nzGhost 参数根据 Collapse 组件 API 文档nzGhost的完整定义如下参数说明类型默认值全局配置[nzGhost]使折叠面板透明且无边框booleanfalse✅从源码 collapse.component.ts 可以看到其实现细节Input({ transform: booleanAttribute }) WithConfig() nzGhost: boolean false;booleanAttribute转换该属性支持字符串布尔写法如直接写nzGhost并自动将、false等按 Angular 规范转换为布尔值。WithConfig()装饰器表示该参数支持全局配置详见下文同时组件在配置变化时会通过onConfigChangeEventForComponent触发markForCheck实现运行时热更新。在模板渲染层面组件宿主元素上通过[class.ant-collapse-ghost]nzGhostcollapse.component.ts动态绑定样式类——开启幽灵模式即向nz-collapse根元素追加ant-collapse-ghost类具体视觉效果由对应 Less 规则决定。与 nz-collapse 其他相关参数配合幽灵模式通常与折叠面板的其他能力组合使用以下参数来自同一份 API 文档[nzBordered]是否有边框默认true同样支持全局配置。注意它控制的是简洁无边框Borderless样式与幽灵模式视觉目标相似但实现不同区别详见下一节。[nzAccordion]手风琴模式每次只展开一个面板默认false支持全局配置。[nzExpandIconPosition]展开图标位置取start | end默认start。[nzSize]面板尺寸取small | large默认middle该参数自 20.2.0 版本起可用。面板级别可用的参数还包括nzHeader、nzExpandedIcon、nzExtra、nzShowArrow、nzActive可双向绑定展开回调为(nzActiveChange)、nzCollapsibleheader | icon | disabled自 20.2.0 起等。这些能力与幽灵模式正交可按需组合。通过全局配置设置默认值由于nzGhost标记了全局配置能力你可以通过provideNzConfig为全站折叠面板统一开启幽灵模式而无需在每一处模板中书写该属性。参考 全局配置文档 的用法import { NzConfig, provideNzConfig } from ng-zorro-antd/core/config; const ngZorroConfig: NzConfig { // 注意组件名称没有 nz 前缀键名即配置模块名 collapse collapse: { nzGhost: true } }; export const appConfig: ApplicationConfig { providers: [provideNzConfig(ngZorroConfig)] };这些全局配置会被注入NzConfigService保存并可在运行时通过nzConfigService.set(collapse, { nzGhost: true })动态更新源码中组件以const NZ_CONFIG_MODULE_NAME: NzConfigKey collapsecollapse.component.ts声明其配置模块名并注册了配置变更监听保证运行时修改立即生效。幽灵模式 vs 无边框模式别再混用ng-zorro-antd 的折叠面板提供两种去掉盒子感的途径容易混淆维度幽灵模式Ghost无边框模式Borderless开关属性nzGhost[nzBordered]false背景完全透明transparent保留头部背景色collapse-header-bg整体边框无border: 0无border: 0面板间分隔线无border-bottom: 0保留 1px 分隔线1px solid border-color-base内容区背景透明透明transparent适用场景嵌入有背景的卡片/容器/页面仅需去除外框、保留分隔结构的简洁样式两者的样式差异在 style/index.less 中体现得非常直观。Borderless 规则第 186-211 行保留了头部背景、面板间border-bottom分隔线只是去掉了整体边框-borderless { background-color: collapse-header-bg; border: 0; .{collapse-prefix-cls}-item { border-bottom: 1px solid border-color-base; } // ... .{collapse-prefix-cls}-item .{collapse-prefix-cls}-panel { background-color: transparent; border-top: 0; } }而 Ghost 规则第 213-229 行则把背景、边框、面板间分隔线全部移除并对内容区垂直内边距做了收紧padding-block: padding-sm-ghost { background-color: transparent; border: 0; .{collapse-prefix-cls}-item { border-bottom: 0; .{collapse-prefix-cls}-panel { background-color: transparent; border: 0; .{collapse-prefix-cls}-body { padding-block: padding-sm; } } } }对比可见Borderless 是去外框、留内分隔Ghost 是全透明、零边框、零分隔。两者可同时开启nzGhost与[nzBordered]false叠加视觉上以更彻底的一侧为准。无边框模式的完整示例见 components/collapse/demo/borderless.ts。源码级原理从输入属性到渲染类名再到样式幽灵模式在 ng-zorro-antd 中是一条清晰的属性 → 类名 → 样式链路可从三个层面理解组件层输入属性collapse.component.ts 声明nzGhost输入并通过宿主绑定[class.ant-collapse-ghost]nzGhost第 25 行控制根元素类名组件使用ViewEncapsulation.None因此其内部样式类可直接作用于 DOM与全局 Less 规则协同。面板层DOM 结构collapse-panel.component.ts 中每个面板渲染为ant-collapse-item内嵌ant-collapse-header与ant-collapse-panel/ant-collapse-body幽灵模式的透明效果会沿这条结构向下传递到每个面板的内容区。样式层Less 规则如上一节所示.ant-collapse-ghost在根容器、面板项、内容面板三个层级依次清除背景与边框最终呈现透明效果。这些变量collapse-header-bg等定义于 style/entry.less 引入的主题体系因此幽灵模式在明暗主题下都能保持背景透明跟随容器的一致性。值得注意的实现细节面板的展开状态由linkedSignal(() this.nzActive())驱动点击事件通过fromEventOutsideAngular在 NgZone 之外监听、再调度回 zone 内更新避免多余变更检测这些机制与幽灵模式无关但保证了透明面板的展开/收起动画animation-collapse依然流畅。测试验证与最佳实践仓库的 collapse.spec.ts 覆盖了折叠面板的边框、箭头、激活、手风琴等行为测试例如 should border work 用例断言nzBorderedfalse时宿主出现ant-collapse-borderless类第 50-56 行。幽灵模式同样遵循属性驱动类名的同一机制ant-collapse-ghost类名的挂载/移除由nzGhost布尔值直接决定逻辑简单且可预测。实战建议优先使用幽灵模式嵌入有背景的容器如卡片nz-card、页面分区、侧边栏分组等透明背景可让折叠面板隐形地成为容器内容的一部分。需要保留分组分隔感时改用 Borderless若页面背景为白色/浅色Borderless 的细分隔线仍能提供信息层级比全透明的 Ghost 更易读。全站统一开启如果产品整体采用幽灵风格用provideNzConfig的collapse.nzGhost统一配置避免逐处书写个别面板需要恢复默认时再局部覆盖[nzGhost]false。组合使用注意方向幽灵模式与 RTLant-collapse-rtl、图标位置ant-collapse-icon-placement-end、尺寸ant-collapse-small/large等类名互不冲突可放心组合。赞分享UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载相关推荐5分钟跑通Browser Use WebUI让AI Agent替你操作浏览器5分钟跑通Browser Use WebUI让AI Agent替你操作浏览器 你被同一个网站反复点过十遍吗Browser Use WebUI就是来救场的装UI组件前端如何快速掌握iFakeLocation面向初学者的iOS虚拟定位完整指南如何快速掌握iFakeLocation面向初学者的iOS虚拟定位完整指南 想要在不越狱的情况下轻松改变iPhone的位置吗iFakeLocation就是你的UI组件前端ng-zorro-antd Collapse 折叠面板组件完全指南从 API 配置到源码实现剖析ng zorro antd Collapse 折叠面板组件完全指南从 API 配置到源码实现剖析 导读 本文是 ng zorro antd 中 CollapsUI组件前端上一篇Python-JOSE安全漏洞修复CVE-2024-33664和CVE-2024-33663深度解析下一篇Goread.io用户指南订阅管理、标记已读与内容筛选完全指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考