ng-zorro-antd 垂直菜单（Vertical Menu）实战指南：子菜单弹出式交互的原理与用法

UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载本文围绕 ng-zorro-antd 菜单组件中vertical垂直模式展开讲解该模式下子菜单以「弹出」形式呈现的行为特性、官方 Demo 的完整用法以及弹出层在源码层面的实现原理。读完你将掌握垂直菜单的模板写法、全部 API 参数、子菜单弹出定位机制以及它与 inline、horizontal 两种模式之间的切换关系。一、什么是垂直菜单子菜单以弹出形式呈现在 ng-zorro-antd 的菜单组件中nz-menu支持三种模式类型定义见 menu.types.tsexport type NzMenuModeType vertical | horizontal | inline;vertical垂直菜单菜单项自上而下垂直排列子菜单以弹出的形式pop-up展开悬浮在菜单主体的右侧或左侧视 RTL 与定位而定horizontal水平菜单菜单项水平排列子菜单向下弹出inline内嵌菜单子菜单以展开/收起的方式内嵌在菜单主体内部占据文档流空间不脱离父容器。官方 Demo 对垂直菜单的描述非常凝练见 vertical.md子菜单是弹出的形式。Submenus open as pop-ups.这正是垂直模式与内嵌模式最本质的区别垂直模式下子菜单并不挤占主体布局而是通过浮层overlay覆盖在页面其他内容之上适合收纳多级导航结构常用于侧边栏导航场景。nzMode的默认值就是vertical见 menu.directive.ts 中Input() nzMode: NzMenuModeType vertical;也就是说不加任何模式配置时菜单即为垂直弹出式菜单。二、官方 Demo 解读一个完整的垂直菜单实现官方垂直菜单示例位于 vertical.ts完整代码如下import { Component } from angular/core; import { NzMenuModule } from ng-zorro-antd/menu; Component({ selector: nz-demo-menu-vertical, imports: [NzMenuModule], template: ul nz-menu nzModevertical li nz-submenu nzTitleNavigation One nzIconmail ul li nz-menu-group nzTitleItem 1 ul li nz-menu-itemOption 1/li li nz-menu-itemOption 2/li /ul /li li nz-menu-group nzTitleItem 2 ul li nz-menu-itemOption 3/li li nz-menu-itemOption 4/li /ul /li /ul /li li nz-submenu (nzOpenChange)change($event) nzTitleNavigation Two nzIconappstore ul li nz-menu-itemOption 5/li li nz-menu-itemOption 6/li li nz-submenu nzTitleSubmenu ul li nz-menu-itemOption 7/li li nz-menu-itemOption 8/li /ul /li /ul /li li nz-submenu nzTitleNavigation Three nzIconsetting ul li nz-menu-itemOption 9/li li nz-menu-itemOption 10/li li nz-menu-itemOption 11/li /ul /li /ul , styles: [nz-menu] { width: 240px; } }) export class NzDemoMenuVerticalComponent { change(value: boolean): void { console.log(value); } }这段模板展示了垂直菜单的几大关键构成根菜单ul nz-menu nzModevertical通过nzMode显式声明垂直模式一级子菜单li nz-submenu nzTitle... nzIcon...nzTitle定义标题文字nzIcon定义标题前的图标类型如mail、appstore、setting图标来自 ng-zorro-antd 的图标系统分组li nz-menu-group nzTitleItem 1用于将同一子菜单下的菜单项分组收纳菜单项li nz-menu-item是最终的导航叶子节点嵌套子菜单Demo 中 Navigation Two 下还嵌套了二级nz-submenuSubmenu说明垂直菜单支持多级弹出结构每一级子菜单都各自以浮层形式弹出展开回调(nzOpenChange)change($event)当子菜单展开/收起时向外抛出boolean值示例中仅打印日志。由于垂直模式下子菜单是浮层并不参与父容器布局Demo 通过样式把根菜单固定为width: 240px以模拟真实侧边导航栏的宽度。三、垂直菜单相关 API 速查垂直菜单使用的是菜单组件通用 API完整参数表见官方文档 index.zh-CN.md这里摘取与垂直模式强相关的部分。[nz-menu]根菜单参数说明类型默认值[nzInlineCollapsed]inline时菜单是否收起状态boolean-[nzInlineIndent]inline模式的菜单缩进宽度number24[nzMode]菜单类型支持垂直、水平、内嵌三种vertical \| horizontal \| inlinevertical[nzSelectable]是否允许选中booleantrue[nzTheme]主题颜色light \| darklight(nzClick)点击nz-menu-item输出属性EventEmitterNzMenuItemComponent[nz-menu-item]菜单项参数说明类型默认值[nzDisabled]是否禁用booleanfalse[nzSelected]是否被选中booleanfalse[nzMatchRouter]是否根据routerLink自动设定nzSelectedbooleanfalse[nzMatchRouterExact]是否路由完整精确匹配booleanfalse[nzDanger]展示错误状态样式booleanfalse[nz-submenu]子菜单垂直弹出交互的核心nz-submenu的标题有三种写法任选其一即可li nz-submenu nzTitleSubTitle nzIconappstore/li li nz-submenu span title nz-icon nzTypeappstore / spanSubTitle/span /span /li li nz-submenu [nzTitle]titleTpl/li ng-template #titleTpl nz-icon nzTypeappstore / spanSubTitle/span /ng-template参数说明类型默认值[nzPlacement]菜单弹出位置bottomLeft \| bottomCenter \| bottomRight \| topLeft \| topCenter \| topRightbottomLeft[nzOpen]是否展开可双向绑定booleanfalse[nzDisabled]是否禁用booleanfalse[nzTitle]标题内容string \| TemplateRefvoid-[nzIcon]标题中icon类型string-[nzMenuClassName]自定义子菜单容器类名string-[nzTriggerSubMenuAction]SubMenu 展开/关闭的触发行为hover \| clickhover(nzOpenChange)展开回调EventEmitterboolean-[nz-menu-group]菜单分组参数说明类型默认值[nzTitle]标题内容string \| TemplateRefvoid-分组标题同样支持字符串、span title投影和TemplateRef三种写法。另外还有nz-menu-divider菜单项分割线官方说明为「只用在弹出菜单内」恰好适用于垂直模式的浮层场景。四、源码视角垂直模式下子菜单如何「弹出」「子菜单是弹出的形式」这句话背后是一套基于 Angular CDK Overlay 的浮层实现。核心逻辑位于 submenu.component.ts。1. inline 与 non-inline 的分叉渲染NzSubMenuComponent的模板中根据mode选择完全不同的子菜单渲染方式mode inline使用nz-submenu-inline-child子菜单内嵌在父级文档流中靠nzOpen控制展开/收起见 submenu-inline-child.component.ts其他模式含vertical走else分支使用cdkConnectedOverlay创建独立浮层只有nzOpen为true时才展示。2. 垂直模式的弹出位置列表源码中定义了垂直模式专用的定位列表见 submenu.component.tsconst listOfVerticalPositions [ POSITION_MAP.rightTop, POSITION_MAP.right, POSITION_MAP.rightBottom, POSITION_MAP.leftTop, POSITION_MAP.left, POSITION_MAP.leftBottom ];这说明垂直模式的子菜单浮层默认优先贴附在触发项的右侧rightTop对齐顶边、right垂直居中、rightBottom对齐底边空间不足时依次回退到左侧。submenu.component.ts中的onPositionChange会依据实际落位将position置为right或left用于给浮层添加ant-menu-submenu-placement-right/-placement-left样式类。3. 触发方式与联动默认nzTriggerSubMenuAction hover即鼠标悬停展开可切换为click点击展开nzSubmenuService.isCurrentSubMenuOpen$状态变化会同步nzOpen并向外触发(nzOpenChange)事件——这正是 Demo 中(nzOpenChange)change($event)能拿到boolean值的原因浮层的overlayOutsideClick与detach事件会把鼠标状态重置为未激活实现点击外部区域收起子菜单禁用态nzDisabled下submenu-non-inline-child.component.ts 中的setMouseState会忽略 hover 触发禁止浮层展开。4. 浮层容器与动画弹出来的子菜单由NzSubmenuNoneInlineChildComponent渲染见 submenu-non-inline-child.component.ts它负责生成浮层容器的样式类ant-menu-submenu ant-menu-submenu-popup ant-menu-light ant-menu-submenu-placement-right并根据模式注入动画——垂直模式使用ant-zoom-big缩放动画水平模式则使用slide-up动画。RTL 环境下还会附加ant-menu-submenu-rtl类。五、垂直模式与 inline 模式的切换、收起联动在 menu.directive.ts 中根菜单通过inlineCollapsed$与mode$两个BehaviorSubject的合并流计算「实际生效模式」combineLatest([this.inlineCollapsed$, this.mode$]) .subscribe(([inlineCollapsed, mode]) { this.actualMode inlineCollapsed ? vertical : mode; this.nzMenuService.setMode(this.actualMode); this.cdr.markForCheck(); });从源码可以推断出两点与垂直模式直接相关的行为inline菜单收起后自动退化为vertical当nzModeinline且nzInlineCollapsed为true时actualMode变为vertical子菜单重新以弹出形式呈现——这是侧边栏折叠sider collapse场景能正常工作的底层保证对应官方 sider-current.md 与 inline-collapsed.md 两个 Demo模式切换时收起所有子菜单ngOnChanges检测到nzMode变化时会遍历所有子菜单调用setOpenStateWithoutDebounce(false)避免切换模式后遗留展开状态。nzInlineIndent默认24与层级服务配合为 inline 模式计算每级缩进而垂直模式因为是浮层不参与缩进计算对应逻辑在 submenu.component.ts 的inlinePaddingLeft mode inline ? this.level * inlineIndent : null。六、选中态与路由联动垂直导航常见诉求垂直菜单多用于侧边导航通常需要与路由联动自动高亮。nz-menu-item支持nzMatchRouter与nzMatchRouterExact两个开关底层实现在 menu-item.component.ts组件监听NavigationEnd路由事件配合router.isActive判断当前 URL 是否命中菜单项内的RouterLinknzMatchRouterExact为true时按paths: exact精确匹配否则按subset子路径匹配命中后通过setSelectedState(true)置为选中同时子菜单组件会聚合其内部nz-menu-item的selected$流自动把所属nz-submenu也标记为isSelected高亮子菜单标题。点击行为方面nz-menu-item的clickMenuItem会先禁用拦截再依次通知MenuService的descendantMenuItemClick$与childMenuItemClick$根菜单订阅前者后若nzSelectable为true且未启用路由匹配则清空其他项的选中态只保留当前项并向外触发(nzClick)。这套链路保证了垂直菜单多级结构下的选中互斥。七、更多实战组合垂直菜单常与其他能力组合使用仓库中提供了可直接参考的配套 Demo主题切换theme.md 演示nzThemedark暗色侧边栏主题通过MenuService.theme$下发到每个子菜单浮层浮层容器会相应添加ant-menu-dark类模式动态切换switch-mode.md 演示在三种模式间动态切换nzMode递归菜单recursive.md 演示用组件递归渲染无限层级菜单垂直弹出结构天然支持多级嵌套侧边栏场景sider-current.md 将垂直菜单与 Layout 的 Sider 组合实现完整的后台导航骨架。结语垂直菜单是 ng-zorro-antd 三种菜单模式中唯一「子菜单以弹出形式呈现」的侧边导航方案该描述源自官方 Demo vertical.md。通过nzModevertical一行配置即可启用配合nz-submenu、nz-menu-group、nz-menu-item组织多级结构底层由 CDK Overlay 浮层、right/left双向定位和 hover 触发机制共同支撑。理解「弹出」背后的渲染分叉与定位逻辑有助于你在侧边栏、后台管理系统中精准掌控导航交互细节。赞分享UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载相关推荐Ant Design 垂直菜单Vertical Menu实战指南弹出式子菜单的布局、交互与源码原理Ant Design 垂直菜单Vertical Menu实战指南弹出式子菜单的布局、交互与源码原理 垂直菜单是 Ant Design 中 modeveUI组件前端设计系统ng-zorro-antd 右键菜单实战用 NzContextMenuService 与 nz-dropdown-menu 构建 Context Menung zorro antd 右键菜单实战用 NzContextMenuService 与 nz dropdown menu 构建 Context Menu nUI组件前端Ant Design Menu 内联模式inline完全指南垂直菜单与内嵌子菜单的实战解析Ant Design Menu 内联模式inline完全指南垂直菜单与内嵌子菜单的实战解析 导读 在 Ant Design 的 Menu 组件中 mod前端UI组件设计系统上一篇Sliver 客户端 crack 命令组深入解析GPU 分布式口令破解的完整工作流下一篇海尔智能家居集成Haier的API接口与认证机制深入分析创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考