UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载本指南聚焦 ng-zorro-antd 的 Menu 组件中的inline内嵌模式子菜单直接内嵌在菜单区域内展开形成垂直多级导航结构是侧边栏导航最常见的形态。读完本文你将掌握nzModeinline的完整写法、缩进与展开控制参数并理解其底层渲染与动画实现原理。Inline 内嵌菜单是什么在原文档components/menu/demo/inline.md中对这种模式的定义非常精炼中文垂直菜单子菜单内嵌在菜单区域。英文Vertical menu with inline submenus.也就是说inline模式与vertical、horizontal并列是nz-menu的三种模式之一其核心特征是子菜单不是弹出式popup浮层而是就地内嵌在父菜单的垂直流中展开时占据菜单自身的区域、把后续菜单项向下推移。这种结构非常适合侧边栏导航能清晰收纳多级页面架构。完整示例三层内嵌菜单官方演示位于 components/menu/demo/inline.ts一个组件即可跑通全部能力完整代码如下import { Component } from angular/core; import { NzMenuModule } from ng-zorro-antd/menu; Component({ selector: nz-demo-menu-inline, imports: [NzMenuModule], template: ul nz-menu nzModeinline li nz-submenu nzTitleNavigation One nzIconmail nzOpen ul li nz-menu-group nzTitleItem 1 ul li nz-menu-item nzSelectedOption 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 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 li nz-submenu nzTitleSubmenu ul li nz-menu-itemOption 9/li li nz-menu-itemOption 10/li /ul /li /ul /li /ul /li li nz-submenu nzTitleNavigation Three nzIconsetting ul li nz-menu-itemOption 11/li li nz-menu-itemOption 12/li li nz-menu-itemOption 13/li /ul /li /ul , styles: [nz-menu] { width: 240px; } }) export class NzDemoMenuInlineComponent {}将该组件放入模块的imports或声明到任意组件的imports: [NzMenuModule]即可渲染。逐层解读这段模板根菜单ul nz-menu nzModeinline声明内嵌模式通过样式约束容器宽度如240px。一级子菜单li nz-submenu nzTitleNavigation One nzIconmail nzOpen其中nzOpen表示默认展开Navigation One 首次进入页面即为展开状态。菜单分组li nz-menu-group nzTitleItem 1给同级菜单项加组标题让列表更有条理。菜单项li nz-menu-item nzSelectedOption 1/linzSelected标记默认选中项未加该属性的项Option 2、3、4…在点击后才会被选中。嵌套层级Navigation Two 内部还嵌了一层nz-submenu而该子菜单内部又嵌一层nz-submenu可见inline 模式支持任意层级递归嵌套——这正是文档里“子菜单内嵌在菜单区域”的直观体现。关键 API 与参数详解以 components/menu/doc/index.zh-CN.md英文版见 components/menu/doc/index.en-US.md为基准与内嵌模式强相关的 API 如下。nz-menu根指令常用参数参数说明类型默认值[nzMode]菜单类型vertical \| horizontal \| inlineNzMenuModeTypevertical[nzInlineCollapsed]inline模式时菜单是否收起booleanfalse[nzInlineIndent]inline模式菜单项每级缩进宽度pxnumber24[nzSelectable]是否允许选中booleantrue[nzTheme]主题light \| darkNzMenuThemeTypelight(nzClick)点击nz-menu-item时的输出事件EventEmitterNzMenuItemComponent-类型定义见 components/menu/menu.types.tsNzMenuModeType vertical | horizontal | inlineNzMenuThemeType light | darkNzSubmenuTrigger hover | click。nz-submenu子菜单常用参数参数说明类型默认值[nzOpen]是否展开可双向绑定booleanfalse[nzTitle]标题内容支持字符串或模板string \| TemplateRefvoid-[nzIcon]标题中的图标类型string-[nzDisabled]是否禁用booleanfalse[nzTriggerSubMenuAction]展开/关闭触发方式hover \| clickhover[nzPlacement]弹出菜单位置仅非 inline 模式生效六种位置枚举bottomLeft[nzMenuClassName]自定义子菜单容器类名string-(nzOpenChange)展开状态回调EventEmitterboolean-nzTitle有三种写法直接字符串 nzIconspan title投影自定义内容或[nzTitle]titleTpl传入ng-template。文档原文还特别说明nzPlacement主要作用于弹出式子菜单inline 模式下子菜单就地展开不涉及浮层定位。nz-menu-item 与 nz-menu-group菜单项nz-menu-item支持nzDisabled禁用、nzSelected选中、nzDanger错误状态样式以及路由相关的nzMatchRouter/nzMatchRouterExact按routerLink自动设置选中态。菜单分组nz-menu-group仅一个nzTitle参数类型同样为string \| TemplateRefvoid。此外还有nz-menu-divider菜单分割线通常用于弹出菜单内。源码级原理解析inline 模式是如何渲染的1. 模式驱动的 class 与 actualMode 计算[nz-menu] 指令components/menu/menu.directive.ts通过宿主绑定为根元素挂上ant-menu与ant-menu-inline等类名[class.ant-menu-inline]: !isMenuInsideDropdown actualMode inlineactualMode由inlineCollapsed$与mode$两个流combineLatest计算得出menu.directive.tsthis.actualMode inlineCollapsed ? vertical : mode;也就是说当nzInlineCollapsed为true时内嵌菜单会临时切换为vertical模式子菜单变为弹出浮层这正是收起态的实现基础随后该模式会通过MenuService.setMode()广播给所有子菜单。2. 子菜单的 inline 分支渲染NzSubMenuComponent 的模板用if (mode inline)分叉inline 模式渲染div nz-submenu-inline-child子菜单内容ng-content投影的ul就地插入配合NzAnimationCollapseDirective见 components/menu/submenu-inline-child.component.ts实现高度折叠动画收起/展开时不会出现弹出浮层vertical / horizontal 模式走cdkConnectedOverlay弹出层路线才有nzPlacement、左右弹出位置等概念。3. 层级缩进如何计算内嵌菜单的视觉层级感来自逐级缩进。子菜单组件在 submenu.component.ts 中监听mode$与inlineIndent$this.inlinePaddingLeft mode inline ? this.level * inlineIndent : null;其中level来自NzSubmenuService的层级计数inlineIndent默认值24定义在 menu.directive.ts并通过 MenuService 的inlineIndent$流下发。因此每嵌套一级子菜单标题与内容自动左移 24px你可以用[nzInlineIndent]全局调整这一步长或通过nzPaddingLeft对单个子菜单单独覆盖。4. 状态广播MenuService 的中枢作用整个菜单树的状态同步依赖 components/menu/menu.service.ts 中的一组BehaviorSubjecttheme$、mode$、inlineIndent$自上而下广播主题、模式与缩进descendantMenuItemClick$收集任意层级的菜单项点击最终在指令层触发nzClick输出并在nzSelectable为true时更新选中态menu.directive.ts。这也是为什么 inline 菜单中深层嵌套的菜单项点击后父级nz-submenu也能正确高亮选中态。延伸内嵌菜单收起inline-collapsed配合[nzInlineCollapsed]inline 菜单可以切换为只显示图标的窄条状态这是侧边栏“收起/展开”交互的标准做法。参考 components/menu/demo/inline-collapsed.tsreadonly isCollapsed signal(false); toggleCollapsed(): void { this.isCollapsed.update(isCollapsed !isCollapsed); }模板中通过按钮切换状态并挂到根菜单上ul nz-menu nzModeinline nzThemedark [nzInlineCollapsed]isCollapsed() li nz-menu-item nz-tooltip nzTooltipPlacementright [nzTooltipTitle]isCollapsed() ? Navigation One : nzSelected nz-icon nzTypemail / spanNavigation One/span /li ... /ul要点收起时actualMode自动变为vertical子菜单改为浮层弹出之前展开的子菜单在收起时会被记录并临时关闭展开时再恢复见 menu.directive.ts 的updateInlineCollapse()收起后文字隐藏通常需要配合nz-tooltip在右侧弹出完整标题如上例所示nzInlineCollapsed与nzMode仅在inline模式下有意义。总结结构ul nz-menu nzModeinlinenz-submenu/nz-menu-group/nz-menu-item递归嵌套即得到子菜单内嵌的垂直导航菜单控制nzOpen控制默认展开nzInlineIndent默认24控制逐级缩进nzInlineCollapsed支持侧边栏收起原理inline 模式在渲染层走内嵌容器 折叠动画收起时切换为 vertical 浮层模式状态统一由MenuService广播同步。如需查看更多用法水平菜单、路由联动、主题切换、递归生成菜单等可继续查阅 components/menu/demo 目录下的其他演示如 router.ts、theme.ts、recursive.ts完整参数说明见 components/menu/doc/index.zh-CN.md。赞分享UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载相关推荐Ant Design Menu 内联模式inline完全指南垂直菜单与内嵌子菜单的实战解析Ant Design Menu 内联模式inline完全指南垂直菜单与内嵌子菜单的实战解析 导读 在 Ant Design 的 Menu 组件中 mod前端UI组件设计系统Ant Design 内嵌菜单Inline Menu实战指南构建多级侧边导航的完整方案Ant Design 内嵌菜单Inline Menu实战指南构建多级侧边导航的完整方案 Ant Design 的 Menu 组件为页面与功能提供导航而UI组件前端设计系统Ant Design Menu 内嵌菜单收起/展开inline-collapsed实战指南Ant Design Menu 内嵌菜单收起/展开inline collapsed实战指南 本篇基于 ant design 仓库中 inline colla前端UI组件设计系统上一篇【免费下载】 精准噪声模拟助力环境影响评价cadnaA噪声模拟软件推荐下一篇探索Modbus协议的完整实现C/C源码解析与应用创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考