UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载ng-zorro-antd 的nz-space与nz-space-compact组件专为「子元素统一间距」与「紧凑连接表单控件」两大场景设计。本文基于 Space 官方文档 并结合 space.component.ts、space-compact.component.ts 等源码完整梳理两个组件的全部 API、尺寸换算、对齐与换行机制并给出可复制运行的实战示例。读完本文你将掌握如何用 Space 快速实现行/列等距排布、用 Split 插入分隔符以及如何让 Button、Input、Select 等表单控件无缝紧凑拼接。When To Use何时使用 Space官方文档明确了 Space 的两类核心使用场景避免组件贴在一起并设置统一间距当页面中多个组件按钮、链接、上传控件等需要水平或垂直排布且希望它们之间保持等距时使用nz-space。紧凑连接表单子组件并折叠边框当子组件属于表单类控件如 Input 与 Select 拼接成搜索栏、Input 与 Button 拼接成提交栏且需要边界完全贴合、边框合并时使用nz-space-compact。与 Flex 组件的区别文档特别指出 Space 与 Flex 组件的差异两者不可混用对比维度nz-spacenz-flex适用对象行内inline元素间的间距设置块级block元素的布局包裹元素会为每个子元素添加一个包裹元素用于行内对齐不添加包裹元素适用场景多个子元素在行/列方向上的等距排列子元素纵向或横向布局提供更多灵活性与控制力从源码看这一差异体现在模板实现上nz-space的模板会对每个子项生成div classant-space-item包裹层见 space.component.ts而nz-space-compact的模板仅是一个透传的ng-content /见 space-compact.component.ts。nz-space API 详解属性一览属性说明类型默认值全局配置[nzSize]间距大小NzSpaceSize \| NzSpaceSize[]small✅[nzDirection]排列方向vertical \| horizontalhorizontal[nzAlign]对齐方式start \| end \| baseline \| center-[nzWrap]自动换行horizontal时生效booleanfalse[nzSplit]设置分隔符TemplateRef \| string-接口定义type NzSpaceSize small | middle | large | number;NzSpaceSize既可以是预定义的三个档位也可以是任意数字单位为像素。类型定义见 types.ts。尺寸换算机制nzSize的底层实现nzSize之所以能接受small | middle | large | number四种取值是因为源码中维护了一张档位到像素值的映射表并经由normalizeSpaceSize归一化为具体的像素数值见 space.component.tsconst SPACE_SIZE: RecordNzSpaceType, number { small: 8, middle: 16, large: 24 };归一化逻辑如下space.component.tsfunction 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 }; }关键结论单一值如nzSizesmall8px、nzSizemiddle16px、nzSizelarge24px或直接传数字[nzSize]1212px数组值nzSize支持传入[水平间距, 垂直间距]二元组例如[nzSize][8, 16]这在启用换行后尤为实用渲染方式归一化后的像素值通过宿主样式绑定直接作用于容器——column-gap控制水平间距、row-gap控制垂直间距见 space.component.ts因此实际间距由 CSS Grid/Flex 的 gap 属性承担无需在每个子项上额外设置 margin。全局配置nzSize支持 Global ConfignzSize标注了 ✅ 全局配置对应源码中的WithConfig()装饰器与_nzModuleName space见 space.component.ts。这意味着你可以通过NzConfigService一次性为全项目设置默认间距无需在每个组件上重复书写import { NzConfigService } from ng-zorro-antd/core/config; Component({ ... }) export class AppComponent { constructor(private nzConfigService: NzConfigService) { this.nzConfigService.set(space, { nzSize: middle }); } }设置后项目中所有nz-space默认间距将变为 16px单个组件上的[nzSize]赋值仍可覆盖全局值。方向nzDirectionhorizontal默认子元素沿水平方向等距排列对应宿主类ant-space-horizontalvertical子元素沿垂直方向堆叠对应宿主类ant-space-vertical。源码通过宿主绑定动态切换这两个类名见 space.component.ts样式文件中再据此设置flex-direction。对齐nzAlignnzAlign支持start | end | baseline | center对应宿主类ant-space-align-*。源码中有一个值得注意的细节水平方向且未显式指定nzAlign时默认对齐方式被推导为center见 space.component.tsthis.mergedAlign this.nzAlign undefined this.nzDirection horizontal ? center : this.nzAlign;也就是说水平排列下不同高度的子元素如文本与按钮默认会垂直居中若希望顶部对齐或底部对齐显式传入nzAlignstart或nzAlignend即可。对齐演示可参考 demo/align.ts其中同时使用了属性形式div nz-space nzAligncenter与指令形式nz-space。换行nzWrapnzWrap仅在horizontal方向生效开启后允许子元素在容器宽度不足时自动换行源码通过[style.flex-wrap]绑定wrap见 space.component.ts。配合数组形式的nzSize可分别控制行内间距与行间间距参见换行示例 demo/wrap.tstemplate: nz-space [nzSize][8, 16] nzWrap for (item of items; track $index) { button *nzSpaceItem nz-buttonButton/button } /nz-space 分隔符nzSplitnzSplit接受TemplateRef或字符串在子项之间插入分隔元素。从模板实现看space.component.ts分隔符会渲染在ant-space-split的span中且不会在最后一个子项后追加if (nzSplit !$last)并通过nzStringTemplateOutlet同时支持字符串与模板两种输入形式模板上下文暴露了$index索引。经典用法是搭配垂直分割线参见分隔符示例 demo/split.tstemplate: nz-space [nzSplit]spaceSplit ng-template #spaceSplit nz-divider nzTypevertical / /ng-template a *nzSpaceItemLink/a a *nzSpaceItemLink/a a *nzSpaceItemLink/a /nz-space 子项标记指令*nzSpaceItemnz-space的子元素必须使用*nzSpaceItem指令标记组件通过ContentChildren(NzSpaceItemDirective, { read: TemplateRef })收集这些子模板见 space.component.ts再逐一渲染进ant-space-item包裹层。NzSpaceItemDirective本身是一个纯标记型指令不携带任何业务逻辑见 space-item.directive.ts。注意nzSpaceItem既可以用星号前缀形式*nzSpaceItem也可以直接作为属性使用见 demo/align.ts 中的ng-container *nzSpaceItem用法。nz-space-compact 紧凑布局当子组件是表单控件、需要紧凑连接并折叠重叠边框时使用nz-space-compact。支持的组件官方文档列出的受支持组件为ButtonCascaderDatePickerInputSelectTimePickerTreeSelect从 demo/compact.ts 可以看到实际演示中还覆盖了nz-input-search、nz-range-picker、nz-input-number、nz-autocomplete、nz-input-wrapper等衍生控件均可与 compact 布局配合。属性一览属性说明类型默认值全局配置[nzBlock]是否将宽度适配为父元素宽度booleanfalse[nzDirection]设置布局方向vertical \| horizontalhorizontal[nzSize]设置子组件尺寸large \| small \| defaultdefault尺寸继承nzSize与 Form 的联动nz-space-compact的nzSize会注入到NZ_SPACE_COMPACT_SIZE令牌中供子项指令消费见 space-compact.component.ts。更关键的是组件会尝试向上注入NZ_FORM_SIZE表单上下文提供的尺寸信号并通过computed计算最终尺寸space-compact.component.tsprivate readonly formSize inject(NZ_FORM_SIZE, { optional: true }); readonly nzSize inputNzSizeLDSType(default); protected readonly finalSize computed(() this.formSize?.() || this.nzSize());这意味着如果nz-space-compact位于一个设置了nzSize的nz-form上下文中紧凑区内的子组件尺寸会自动跟随表单尺寸无需在每个控件上单独声明。边框折叠的实现原理指令化类名计算紧凑组件的边框合并并不依赖 JS 计算而是通过为每个子项生成特定 CSS 类名实现。核心逻辑位于 space-compact-item.directive.ts组件在 providers 中提供NZ_SPACE_COMPACT_ITEMS信号用于登记所有子项space-compact.token.ts每个子项通过afterNextRender钩子把自己按 DOM 位置插入到 items 信号数组中并在销毁时移除space-compact-item.directive.ts指令基于「项类型 方向 是否为首/末项」计算类名space-compact-item.directive.ts生成形如ant-btn-compact-item、ant-btn-compact-first-item、ant-btn-compact-last-item的类垂直方向则插入vertical-前缀首项去除右/下边框、末项去除左/上边框中间项去除相邻边框从而形成视觉上无缝拼接的效果RTL 场景还会追加-rtl类名。由于类名推导完全基于组件内部信号与 DOM 位置使用者只需把控件直接放进nz-space-compact即可无需手动添加任何 class。实战示例搜索栏、输入框组与选择器拼接以下代码摘取自官方演示 demo/compact.ts展示了几种典型的紧凑拼接形态!-- Input 与 Button 拼接提交栏 -- nz-space-compact nzBlock nzSizesmall input nz-input valuehttps://ng.ant.design [style.width]calc(100% - 200px) / button nz-button nzTypeprimarySubmit/button /nz-space-compact !-- Select 与 Input 拼接城市选择 地址输入 -- nz-space-compact nzBlock nz-select ngModelZhejianggggg nz-option nzLabelZhejianggggg nzValueZhejianggggg / nz-option nzLabelJiangsu nzValueJiangsu / /nz-select input nz-input valueXihu District, Hangzhou [style.width.%]50 / /nz-space-compact !-- RangePicker 与 Input、Button 拼接查询栏 -- nz-space-compact nzBlock nz-range-picker [style.width.%]70 / input nz-input valueinput content [style.width.%]30 / button nz-button nzTypeprimary查询/button /nz-space-compact要点说明nzBlock让紧凑区域占满父容器宽度配合[style.width.%]或calc()为各控件分配比例宽度nzSizesmall统一缩小子控件尺寸适合紧凑工具栏多个nz-space-compact之间如需换行可以像 demo 中那样用br /分隔正式页面建议改用nz-space或 CSS 外边距。垂直方向与纯按钮组垂直紧凑设置nzDirectionvertical常用于按钮组纵向堆叠、边框横向折叠示例见 demo/compact-button-vertical.ts。纯按钮组nz-space-compact内直接放置多个按钮即可形成经典的分组按钮相邻按钮的左右边框自动合并示例见 demo/compact-buttons.ts。快速上手与模块导入两个组件同属NzSpaceModule导入后即可使用import { NzSpaceModule } from ng-zorro-antd/space; Component({ selector: app-demo, imports: [NzSpaceModule, NzButtonModule], // standalone 组件写法 template: nz-space nzDirectionvertical [nzSize]12 button *nzSpaceItem nz-button nzTypeprimaryPrimary/button button *nzSpaceItem nz-buttonDefault/button /nz-space }) export class AppDemoComponent {}模块定义见 space.module.ts它同时导出NzSpaceComponent、NzSpaceItemDirective与NzSpaceCompactComponent。公开 API 见 public-api.ts其中导出了组件、指令、令牌以及全部类型定义NzSpaceSize、NzSpaceDirection、NzSpaceAlign等见 types.ts。源码结构与设计小结Space 模块的目录结构如下space.component.tsnz-space主组件负责尺寸归一化、方向/对齐/换行类名与 gap 样式space-item.directive.ts子项标记指令space-compact.component.ts紧凑容器提供尺寸上下文space-compact-item.directive.ts按位置为子项生成首/末/中间类名实现边框折叠space-compact.token.tsNZ_SPACE_COMPACT_SIZE/NZ_SPACE_COMPACT_ITEMS/NZ_SPACE_COMPACT_ITEM_TYPE三个注入令牌types.ts对外类型定义style包含entry.less、compact.less、index.less等样式文件demobasic、size、vertical、wrap、align、split、compact、compact-buttons、compact-button-vertical、customize 等官方演示。两个组件在设计上有明确分工nz-space面向通用等距排布含全局配置、分隔符、换行nz-space-compact面向表单控件无缝拼接含尺寸继承与边框折叠。理解其底层「档位→像素归一化」「gap 样式绑定」「令牌驱动的类名计算」三条机制后即可在真实项目中灵活组合快速产出规整、可维护的布局代码。赞分享UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载相关推荐ng-zorro-antd Space 间距组件实战指南从等距排布到紧凑型表单ng zorro antd Space 间距组件实战指南从等距排布到紧凑型表单 导读 本文围绕 ng zorro antd 组件库的 Space间距 布局UI组件前端ant-design-vue Space 组件完全指南从间距布局到 Space.Compact 紧凑表单ant design vue Space 组件完全指南从间距布局到 Space.Compact 紧凑表单 导读 Space 是 ant design vue前端UI组件设计系统ant-design-vue Space 组件完全指南统一间距布局与 Space.Compact 紧凑组合ant design vue Space 组件完全指南统一间距布局与 Space.Compact 紧凑组合 ant design vue 中的 Space 组前端UI组件设计系统上一篇10个反面教材Hacker Scripts项目揭示糟糕命名如何毁掉代码可维护性下一篇GitHub_Trending/ha/hacker-scripts代码质量报告项目健康度评估创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考