ng-zorro-antd Space 组件基本用法：轻松实现相邻组件的水平间距

UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载ng-zorro-antd Space 组件基本用法轻松实现相邻组件的水平间距导读nz-space是 ng-zorro-antdAngular UI 组件库中专门用于统一设置组件之间间距的布局组件。本文以官方 Demo「基本用法」components/space/demo/basic.md 为起点结合其配套示例代码 components/space/demo/basic.ts、组件源码 components/space/space.component.ts 与测试用例 components/space/space.component.spec.ts系统讲解如何使用nz-space让相邻组件保持统一的水平间距、如何理解其底层实现原理并覆盖方向、对齐、换行、分隔符、自定义尺寸以及紧凑模式nz-space-compact等完整 API。基本用法相邻组件水平间距Demo 文档「基本用法」的核心诉求只有一句话相邻组件水平间距——避免组件紧贴在一起拉开统一的空间。这在工具栏、操作区、表单行等场景中极为常见一排按钮、上传控件、确认弹窗提示彼此之间需要等距且美观。配套的示例代码 components/space/demo/basic.ts 展示了一个典型用法用nz-space包裹三个不同类型的元素普通按钮、上传按钮、带 Popconfirm 的确认按钮并给每个子元素加上*nzSpaceItem结构指令import { Component } from angular/core; import { NzButtonModule } from ng-zorro-antd/button; import { NzIconModule } from ng-zorro-antd/icon; import { NzPopconfirmModule } from ng-zorro-antd/popconfirm; import { NzSpaceModule } from ng-zorro-antd/space; import { NzUploadModule } from ng-zorro-antd/upload; Component({ selector: nz-demo-space-basic, imports: [NzButtonModule, NzIconModule, NzSpaceModule, NzPopconfirmModule, NzUploadModule], template: nz-space button *nzSpaceItem nz-button nzTypeprimaryButton/button nz-upload *nzSpaceItem nzActionhttps://www.mocky.io/v2/5cc8019d300000980a055e76 button nz-button nz-icon nzTypeupload / Click to Upload /button /nz-upload button *nzSpaceItem nz-button nz-popconfirm nzOkTextYes nzCancelTextNo nzPopconfirmTitleAre you sure delete this task? Confirm /button /nz-space }) export class NzDemoSpaceBasicComponent {}这段代码有四个关键点容器nz-space是间距容器默认按水平方向排列子元素之间自动等距。标记子元素每个需要参与间距计算的子元素都要加上*nzSpaceItem结构指令。没有该标记的内容不会被包装进间距体系。子元素类型不限按钮、上传、任何自定义组件都可以作为子元素nz-space只负责间距不干预内容本身。组合使用示例中nz-button、nz-upload、nz-popconfirm都可以和nz-space无缝组合说明这是一个通用布局容器。在项目中使用模块导入与最小示例nz-space、nzSpaceItem指令与紧凑模式组件统一由NzSpaceModule导出定义在 components/space/space.module.tsNgModule({ imports: [NzSpaceComponent, NzSpaceItemDirective, NzSpaceCompactComponent], exports: [NzSpaceComponent, NzSpaceItemDirective, NzSpaceCompactComponent] }) export class NzSpaceModule {}在独立组件standalone模式下直接在组件imports中引入NzSpaceModule即可如 basic 示例所示在模块NgModule模式下将NzSpaceModule加入对应模块的imports。一个可运行的最小示例nz-space button *nzSpaceItem nz-button操作一/button button *nzSpaceItem nz-button nzTypeprimary操作二/button button *nzSpaceItem nz-button nzTypedanger删除/button /nz-space不做任何配置时两个按钮之间默认保持small8px的水平间距且子元素在水平方向上按center对齐。nz-space API 详解完整参数说明见官方文档 components/space/doc/index.zh-CN.md此处结合源码逐一展开。参数说明类型默认值支持全局配置[nzSize]间距大小NzSpaceSize \| NzSpaceSize[]small✅[nzDirection]间距方向vertical \| horizontalhorizontal[nzAlign]对齐方式start \| end \| baseline \| center-[nzWrap]是否自动换行仅在horizontal时有效booleanfalse[nzSplit]设置分隔符TemplateRef \| string-其中NzSpaceSize的类型定义在 components/space/types.tsexport type NzSpaceDirection vertical | horizontal; export type NzSpaceAlign start | end | center | baseline; export type NzSpaceType small | middle | large; export type NzSpaceSize NzSpaceType | number;nzSize三种预设与自定义数值间距大小支持两种形态预设字符串small默认8px、middle16px、large24px。这三个数值定义在 components/space/space.component.ts 顶部的常量中const SPACE_SIZE: RecordNzSpaceType, number { small: 8, middle: 16, large: 24 };数字或数组直接传number自定义像素值如nzSize32也可以传二元数组[水平间距, 垂直间距]例如[nzSize][36, 18]分别控制水平与垂直方向。小贴士Demo「间距大小」components/space/demo/size.md 演示了通过nzSizelarge、nzSizemiddle切换大小不设置时默认即small。nzDirection 与 nzAlign方向与对齐nzDirection决定排列方向默认horizontal可设为vertical实现纵向等距排列。nzAlign控制子元素在交叉轴上的对齐方式。文档中默认值标注为-但源码有一个隐含行为当nzDirection为horizontal且未显式设置nzAlign时默认对齐为center见ngOnChanges中的mergedAlign计算逻辑当方向为vertical时不附加任何对齐类。nzWrap是否自动换行nzWrap为true时容器允许换行源码中映射为 CSSflex-wrap: wrap避免子元素在一行内溢出。官方文档注明该属性仅在horizontal方向下生效。nzSplit自定义分隔符nzSplit接收一个TemplateRef或字符串在相邻子元素之间插入分隔元素。Demo components/space/demo/split.ts 展示了用垂直分割线做分隔符的写法nz-space [nzSplit]spaceSplit ng-template #spaceSplit nz-divider nzTypevertical / /ng-template a *nzSpaceItemLink/a a *nzSpaceItemLink/a a *nzSpaceItemLink/a /nz-space源码级实现原理从指令收集到 CSS Gap理解nz-space的底层实现可以更精准地预判它的行为。核心实现集中在 components/space/space.component.ts。组件模板包裹元素 分隔符插槽组件模板用 Angular 的控制流语法遍历子项ng-content / for (item of items; track item) { div classant-space-item ng-container [ngTemplateOutlet]item / /div if (nzSplit !$last) { span classant-space-split ng-template [nzStringTemplateOutlet]nzSplit [nzStringTemplateOutletContext]{ $implicit: $index }{{ nzSplit }}/ng-template /span } }每个被*nzSpaceItem标记的子元素都会被渲染进一个ant-space-item包裹层这正是文档中所说的“为每一个子元素添加包裹元素用于内联对齐”。分隔符nzSplit以ant-space-split形式插在子项之间最后一个子项后不插入nzSplit为字符串时直接渲染文本为模板时还支持上下文$implicit当前索引可用来自定义“第几个”分隔符的样式。子元素收集机制nzSpaceItem指令定义在 components/space/space-item.directive.ts本身是一个纯标记指令Directive({ selector: [nzSpaceItem] }) export class NzSpaceItemDirective {}组件通过ContentChildren(NzSpaceItemDirective, { read: TemplateRef })收集所有标记项的内容模板并在items.changes变化时触发变更检测因此子元素是动态增删的也能正确重排。间距的落地方式CSS Gap间距并非通过 margin 计算而是直接映射为容器的 CSS 属性组件host绑定[style.flex-wrap]: nzWrap ? wrap : null, [style.column-gap.px]: horizontalSize, [style.row-gap.px]: verticalSizenzSize经过normalizeSpaceSize归一化后分别赋值给column-gap水平间距与row-gap垂直间距这也是NzSpaceSize[]二元数组能分别控制两个方向的原因function normalizeSpaceSize(size: NzSpaceSize | [NzSpaceSize, NzSpaceSize]): { horizontalSize: number; verticalSize: number; } { const [horizontalSize, verticalSize] (Array.isArray(size) ? size : ([size, size] as const)).map(s typeof s number ? s : SPACE_SIZE[s] ); return { horizontalSize, verticalSize }; }RTL 支持组件通过Directionality感知文档方向自动添加ant-space-rtl类因此在使用 RTL 布局如阿拉伯语环境时无需额外处理。何时使用 Space何时使用 Flex官方文档明确指出nz-space与 Flex 组件的定位差异Space为内联元素提供间距本身会为每个子元素添加包裹元素用于内联对齐适合行、列中多个子元素的等距排列Flex为块级元素提供间距本身不添加包裹元素适合垂直或水平方向上的子元素布局并提供更多灵活性与控制能力。简单来说只想要“一排东西等距排开”用nz-space最省事需要复杂布局、比例分配、主轴/交叉轴精细控制时改用nz-flex。进阶用法速览仓库中components/space/demo/目录下还有一组配套 Demo可作为基本用法的延伸方向components/space/demo/vertical.md 演示nzDirectionvertical的纵向等距排列对齐components/space/demo/align.md 演示nzAlign的四种取值对交叉轴对齐的影响换行components/space/demo/wrap.md 演示nzWrap在横向空间不足时的自动换行分隔符components/space/demo/split.md 演示nzSplit分隔符自定义尺寸components/space/demo/customize.md 演示数字与数组形式的nzSize。紧凑连接nz-space-compact当表单组件需要紧凑连接并合并边框如输入框与按钮连成一体时应使用nz-space-compact实现源码见 components/space/space-compact.component.ts。支持的组件包括Button、Cascader、DatePicker、Input、Select、TimePicker、TreeSelect。参数说明类型默认值[nzBlock]将宽度调整为父元素宽度booleanfalse[nzDirection]指定排列方向vertical \| horizontalhorizontal[nzSize]子组件大小large \| small \| defaultdefault实现上nz-space-compact通过NZ_SPACE_COMPACT_SIZE、NZ_SPACE_COMPACT_ITEMS两个注入令牌向下层组件传递“紧凑上下文”并会优先读取表单级尺寸NZ_FORM_SIZE可选注入作为最终尺寸因此放在表单容器中时能自动跟随表单整体规格。行为如何被测试保障components/space/space.component.spec.ts 用单元测试固化了上述行为可作为理解 API 边界的权威参考尺寸映射small/middle/large分别渲染columnGap/rowGap为8px/16px/24px自定义尺寸数字36渲染为36px数组[36, 18]渲染为水平36px、垂直18px换行nzWrap为true时flexWrap为wrap方向与对齐horizontal默认附加ant-space-align-center类设置end后变为ant-space-align-endvertical时无对齐类分隔符N 个子项渲染N-1个ant-space-split。全局配置让所有 Space 默认值统一nzSize支持全局配置API 表中标记 ✅。源码中通过Input() WithConfig() nzSize与_nzModuleName: NzConfigKey space接入 ng-zorro-antd 的全局配置体系components/core/config 相关实现因此可以在应用启动时统一修改默认间距例如将全局默认从small调整为middle无需逐处修改组件代码。其余参数方向、对齐、换行、分隔符不支持全局配置。小结nz-space是 ng-zorro-antd 中“小而美”的布局组件用nz-space包裹 *nzSpaceItem标记即可获得统一的组件间距底层基于 CSS Gap 与模板包裹实现行为稳定且支持 RTL配合nzSize预设/数字/数组、nzDirection、nzAlign、nzWrap、nzSplit以及nz-space-compact紧凑模式可覆盖从工具栏按钮组到复杂表单连接的大多数间距场景。阅读完本文后你可以直接在项目中套用基本用法示例并根据需要按 API 表逐项定制间距行为。赞分享UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载相关推荐解析Wan2.2-T2V-A14B的电影级美学灯光与构图控制技巧解析Wan2.2 T2V A14B的电影级美学灯光与构图控制技巧 Wan2.2 T2V A14B是一款先进的文本到视频生成模型它通过创新的MoE架构和精心设UI组件前端ng-zorro-antd Divider 组件详解水平分割线的用法、参数与源码实现ng zorro antd Divider 组件详解水平分割线的用法、参数与源码实现 在 Angular 项目中使用 ng zorro antd 的 nz dUI组件前端从源码到部署CrowdStrike CRT内部工作原理与自定义扩展终极指南从源码到部署CrowdStrike CRT内部工作原理与自定义扩展终极指南 CrowdStrike CRTCrowdStrike Reporting Too上一篇为Readest电子书阅读器添加新语言支持的终极指南下一篇如何使用C20 using enum简化枚举作用域的终极指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考