ng-zorro-antd Breadcrumb 图标面包屑：把图标放在文字前面的完整实战指南

UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载导读在 Angular UI 组件库 ng-zorro-antd 中Breadcrumb面包屑是导航体系中告知用户当前身处何地的关键组件。本文围绕仓库中的 with-icon 演示 展开系统讲解如何在面包屑导航项中嵌入图标Icon包括图标前置布局、无文字纯图标项、图标与链接文字的组合并结合仓库源码剖析其底层实现。读完本文你将掌握nz-breadcrumb-item内自由编排图标与文字的写法并了解如何借助nzSeparator用图标自定义分隔符。一、核心示例图标放在文字前面官方演示 with-icon.ts 的原意是图标应当放在文字前面The icon should be placed in front of the text。完整代码如下import { Component } from angular/core; import { NzBreadCrumbModule } from ng-zorro-antd/breadcrumb; import { NzIconModule } from ng-zorro-antd/icon; Component({ selector: nz-demo-breadcrumb-with-icon, imports: [NzBreadCrumbModule, NzIconModule], template: nz-breadcrumb nz-breadcrumb-item nz-icon nzTypehome / /nz-breadcrumb-item nz-breadcrumb-item a nz-icon nzTypeuser / spanApplication List/span /a /nz-breadcrumb-item nz-breadcrumb-itemApplication/nz-breadcrumb-item /nz-breadcrumb }) export class NzDemoBreadcrumbWithIconComponent {}运行效果是一条三级面包屑第一级仅一个home图标无文字作为首页入口第二级user图标 Application List 文字包在a链接内第三级纯文字 Application当前页。从模板结构可以看出图标并不存在独立的面包屑图标属性而是利用nz-breadcrumb-item内部支持ng-content投影的特性直接向每一项中插入nz-icon元素。这正是 breadcrumb-item.component.ts 中noMenuTpl模板的设计ng-template #noMenuTpl span classant-breadcrumb-link ng-content / /span /ng-template任何放入nz-breadcrumb-item的内容都会被投影到ant-breadcrumb-link容器中因此图标与文字的组合完全自由。二、依赖与引入别忘了 NzIconModule要让nz-icon nzType...生效必须同时引入两个模块imports: [NzBreadCrumbModule, NzIconModule]NzBreadCrumbModule来自ng-zorro-antd/breadcrumb在 breadcrumb.module.ts 中统一导出nz-breadcrumb、nz-breadcrumb-item、nz-breadcrumb-separator三个组件NzIconModule来自ng-zorro-antd/icon提供nz-icon指令。nz-icon的核心输入是nzType即图标名称。从源码 icon.directive.ts 可以看到nzType是一个必填的字符串输入用于在图标服务中解析并渲染对应的 SVG 图标。演示中使用的home、user均为内置图标名图标名可在仓库 icons.ts 中查找确认。三、三种常见布局模式对比3.1 纯图标项无文字常用于最顶层的首页入口占用空间小、视觉简洁nz-breadcrumb-item nz-icon nzTypehome / /nz-breadcrumb-item3.2 图标 文字可点击链接图标放在文字前面整体包裹在a中保留链接语义nz-breadcrumb-item a nz-icon nzTypeuser / spanApplication List/span /a /nz-breadcrumb-item注意这里的a是普通锚点而非[routerLink]若需要路由跳转可自行替换为 Angular 路由指令。另外breadcrumb-item.component.ts 还支持nzOverlay输入传入nz-dropdown-menu即可让某一项变为可下拉的菜单项此时会在该项右侧自动渲染一个down图标nz-breadcrumb-item [nzOverlay]menu ... /nz-breadcrumb-item3.3 纯文字项当前页最后一级一般表示当前位置直接写文本即可与图标项混用毫无违和nz-breadcrumb-itemApplication/nz-breadcrumb-item四、更进一步用图标自定义分隔符除了在导航项内部放图标图标放在文字前面的思路还可以延伸到分隔符上。官方 separator 演示 展示了两种自定义分隔符的方式import { Component } from angular/core; import { NzBreadCrumbModule } from ng-zorro-antd/breadcrumb; import { NzIconModule } from ng-zorro-antd/icon; Component({ selector: nz-demo-breadcrumb-separator, imports: [NzBreadCrumbModule, NzIconModule], template: h4String/h4 nz-breadcrumb nzSeparator nz-breadcrumb-itemHome/nz-breadcrumb-item nz-breadcrumb-item aApplication List/a /nz-breadcrumb-item nz-breadcrumb-itemAn Application/nz-breadcrumb-item /nz-breadcrumb br / h4TemplateRef/h4 nz-breadcrumb [nzSeparator]iconTemplate nz-breadcrumb-itemHome/nz-breadcrumb-item nz-breadcrumb-item aApplication List/a /nz-breadcrumb-item nz-breadcrumb-itemAn Application/nz-breadcrumb-item /nz-breadcrumb ng-template #iconTemplatenz-icon nzTypearrow-right //ng-template , styles: h4:first-child { margin-top: 0; } h4 { margin: 16px 0; font-size: 14px; line-height: 1; font-weight: normal; } }) export class NzDemoBreadcrumbSeparatorComponent {}字符串分隔符直接写nzSeparator简单直接TemplateRef 分隔符通过ng-template #iconTemplate定义一个只包含arrow-right图标的模板再绑定[nzSeparator]iconTemplate即可用箭头图标替代默认的/。从 breadcrumb.component.ts 可见nzSeparator的类型为string | TemplateRefvoid | null默认值是/在 breadcrumb-item.component.ts 中它通过nzStringTemplateOutlet同时支持字符串与模板两种渲染方式。若nzSeparator为null则整条面包屑不会渲染任何分隔符。五、与自动生成模式nzAutoGenerate的关系图标写法基于手动编写nz-breadcrumb-item它与nz-breadcrumb的自动生成模式nzAutoGenerate是两种并列的使用方式手动模式完全自定义每一项的内容图标、链接、下拉菜单皆可自由组合本文所有示例均属此类自动模式设置[nzAutoGenerate]true后breadcrumb.component.ts 会订阅路由的NavigationEnd事件递归遍历ActivatedRoute树从路由配置的data.breadcrumb字段读取标签并自动生成导航项。此时导航项模板固定为a 文本不包含图标位因此图标需求必须通过手动模式实现。如果需要在自动模式下扩展可以配合nzRouteLabelFn对标签文本做国际化翻译或格式化但这不属于图标范畴此处不再展开。六、小结与扩展建议结合仓库源码可以总结出在 ng-zorro-antd 中使用图标面包屑的完整要点引入依赖同时导入NzBreadCrumbModule与NzIconModule图标前置把nz-icon nzType...放在文字之前即可实现图标放在文字前面的官方推荐布局自由组合nz-breadcrumb-item支持内容投影图标可与文字、a链接、下拉菜单任意组合图标即分隔符通过nzSeparator的TemplateRefvoid类型可把任意图标当作面包屑分隔符源码定位组件模板与输入定义见 breadcrumb.component.ts 与 breadcrumb-item.component.ts图标渲染逻辑见 icon.directive.ts。如果想要进一步探索仓库还提供了 basic 基本用法、router 路由用法 以及 dropdown 下拉用法 等更多演示均可在components/breadcrumb/demo/目录下查阅。赞分享UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载相关推荐Ant Design Breadcrumb 图标用法在面包屑中把图标放在文字前面Ant Design Breadcrumb 图标用法在面包屑中把图标放在文字前面 导读 本篇基于 ant design 仓库中 components/brea前端UI组件设计系统ng-zorro-antd Breadcrumb 自动生成面包屑实战指南基于 router.data 的路由驱动实现ng zorro antd Breadcrumb 自动生成面包屑实战指南基于 router.data 的路由驱动实现 导读 本篇指南聚焦 ng zorro aUI组件前端ng-zorro-antd 面包屑下拉菜单Breadcrumb with Dropdown从示例到源码解析ng zorro antd 面包屑下拉菜单Breadcrumb with Dropdown从示例到源码解析 导读 本文聚焦 ng zorro antdAUI组件前端上一篇AnyFlow-FAR-Wan2.1-1.3B-Diffusers进阶应用如何实现视频风格迁移与内容编辑下一篇Lisp 1.5 解释器开源项目常见问题解决方案创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考