前端UI组件设计系统【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址https://gitcode.com/gh_mirrors/ant/ant-design点击查看免费下载本指南聚焦 Ant DesignantdSpace组件的size属性讲解如何通过预设尺寸small/middle/large、自定义数值数字或[水平, 垂直]数组以及全局ConfigProvider统一控制元素之间的间距。读完本文你将掌握size的全部取值形态、默认值解析规则并能从源码与测试层面理解间距最终是如何落到row-gap/column-gap样式上的。size是什么Space 组件的核心间距开关Space是 Ant Design 提供的用于在水平或垂直方向排布一组元素、并自动为其添加统一间距的布局组件。间距的大小完全由size属性决定。官方 demo 文档 components/space/demo/size.md 对此给出的说明是使用size设置元素之间的间距预设了small、middle、large三种尺寸也可以自定义间距若不设置size则默认为small。也就是说size承担三个职责三档预设尺寸直接传字符串small、middle或large之一自定义数值间距传任意数字单位 px或传[水平间距, 垂直间距]数组分别控制两个方向默认值兜底完全不传时间距回落到small。在 API 文档 components/space/index.en-US.md 中size的类型被定义为Size | Size[]默认值为small其中Size[]即数组形态从 4.9.0 版本开始支持。三种预设尺寸对应的实际像素值small、middle、large三个字符串并非魔法值它们在底层被映射为具体的间距像素。映射关系定义在 Space 组件的样式生成文件 components/space/style/index.ts 中spaceGapSmallSize: token.paddingXS, // small → paddingXS spaceGapMiddleSize: token.padding, // middle → padding spaceGapLargeSize: token.paddingLG, // large → paddingLG这三个 token 又来自主题的基础尺寸体系。在 components/theme/themes/shared/genSizeMapToken.ts 中默认主题的尺寸按 4px 步进sizeUnit 4sizeStep 4见 components/theme/themes/seed.tssizeXS 84 * (4 - 2)→paddingXSsize 164 * 4→paddingsizeLG 244 * (4 2)→paddingLG。因此默认主题下三个预设尺寸对应的间距为size 值对应 token默认像素值smallpaddingXS8pxmiddlepadding16pxlargepaddingLG24px从源码看间距值并不写死而是跟随主题 token因此通过ConfigProvider的theme定制或紧凑compact主题这些预设间距会自动缩放。例如紧凑主题在 components/theme/themes/compact/genCompactSizeMapToken.ts 中对sizeXS、sizeLG等进行了重新计算Space的预设间距也会随之收紧。交互式 demo 全解析从预设到自定义的动态切换官方 demo 的实现位于 components/space/demo/size.tsx它用Radio.Group提供了small、middle、large、customize四个选项并在选择customize时通过Slider动态调整自定义数值const [size, setSize] useStateSizeType | [SizeType, SizeType] | customize(small); const [customSize, setCustomSize] React.useStatenumber(0); Radio.Group value{size} onChange{(e) setSize(e.target.value)} {[small, middle, large, customize].map((item) ( Radio key{item} value{item}{item}/Radio ))} /Radio.Group {size customize ( Slider value{customSize} onChange{setCustomSize} / br / / )} Space size{size ! customize ? size : customSize} Button typeprimaryPrimary/Button ButtonDefault/Button Button typedashedDashed/Button Button typelinkLink/Button /Space这段代码演示了size的两种典型用法字符串预设直接把small | middle | large传给size数值自定义把Slider拖出的数值单位 px直接传给size间距随滑块实时变化。demo 中useState的初始值类型来自ConfigProviderProps[componentSize]即small | middle | large见 components/config-provider/SizeContext.tsx而size属性本身的类型在组件定义中要更宽——可以是SpaceSizeSizeType | number或[SpaceSize, SpaceSize]数组定义见 components/space/index.tsx。数组形态分别控制水平与垂直间距除了单一预设字符串和单一数值size还支持[horizontal, vertical]数组形态例如Space size{[8, 16]} Button水平间距 8px/Button Button垂直间距 16px/Button /Space组件在渲染前会先解构数组见 components/space/index.tsxconst [horizontalSize, verticalSize] Array.isArray(size) ? size : ([size, size] as const);即传入单一值等价于[value, value]两个方向使用相同间距。数组中的每个元素既可以是预设字符串也可以是数字两者可混用如[small, 24]。默认值small与全局 ConfigProvider 覆盖size的默认值解析有两层见 components/space/index.tsxsize space?.size ?? small,若没有显式传size优先使用ConfigProvider中space.size的全局配置space来自ConfigContext若全局也没有配置才回落到默认值small。因此你可以通过ConfigProvider为整个应用统一设置 Space 间距import { ConfigProvider, Space } from antd; ConfigProvider space{{ size: large }} Space Button全局生效的 large 间距/Button Button无需逐个配置/Button /Space /ConfigProvider这与 demo 文档中“若不设置size则默认为small”的描述一致同时补充了全局覆盖这条真实存在的解析路径。源码级实现间距如何变成 CSSsize的取值最终被转换成两类 CSS 实现其完整逻辑在 components/space/index.tsx 中预设字符串 → 工具类名通过isPresetSize判断是否为small/middle/large之一若是则给容器追加ant-space-gap-row-{size}与ant-space-gap-col-{size}类名数值 → 内联 gap 样式通过isValidGapNumber判断是否为有效数字若是则直接写入gapStyle.columnGap与gapStyle.rowGap。对应的工具函数定义在 components/_util/gapSize.tsexport function isPresetSize(size?: SizeType | string | number): size is SizeType { return [small, middle, large].includes(size as string); } export function isValidGapNumber(size?: SizeType | string | number): size is number { if (!size) { // 此处刻意排除 size 0 的情况CSS gap 属性默认值本身就是 0 // 用户传入 0 时可以直接忽略避免产生无意义的样式 return false; } return typeof size number !Number.isNaN(size); }从源码结构可以看出两个值得注意的边界行为传入0会被忽略因为 CSSgap的默认值就是 0无需额外声明传入NaN会被安全跳过isValidGapNumber返回false不会产生非法样式——测试 components/space/tests/gap.test.tsx 中专门有should NaN work用例验证Space size{[NaN, NaN]}渲染不会抛错。预设字符串对应的样式类在 components/space/style/index.ts 的genSpaceGapStyle中生成-gap-row-small { row-gap: token.spaceGapSmallSize; } -gap-row-middle { row-gap: token.spaceGapMiddleSize; } -gap-row-large { row-gap: token.spaceGapLargeSize; } -gap-col-small { column-gap: token.spaceGapSmallSize; } -gap-col-middle { column-gap: token.spaceGapMiddleSize; } -gap-col-large { column-gap: token.spaceGapLargeSize; }即底层统一使用 CSS Flexbox 的gap属性实现间距容器本身是inline-flex见同文件genSpaceStyle这比传统的margin方案更简洁也避免了首尾元素多余边距的问题。测试用例验证components/space/tests/gap.test.tsx 中有一组针对间距实现的测试直接印证了上文的行为it(should render width empty children, () { // 不传 size默认 small容器应带有 ant-space-gap-row-small 和 ant-space-gap-col-small 类 expect(container.querySelector(div.ant-space)).toHaveClass(ant-space-gap-row-small); expect(container.querySelector(div.ant-space)).toHaveClass(ant-space-gap-col-small); }); it(should size work, () { // 传入数字 10容器内联样式应为 row-gap: 10px; column-gap: 10px const element container.querySelector(div.ant-space); expect(element).toHaveStyle({ rowGap: 10px, columnGap: 10px }); }); it(should NaN work, () { // 传入 NaN 数组不应抛错 expect(() { render(Space size{[NaN, NaN]}spantest/span/Space); }).not.toThrow(); });这三个用例分别验证了默认值回落为small类名断言、数值自定义会写入内联 gap 样式、非法数值NaN的安全兜底。相关 demo 的渲染测试还由 components/space/tests/demo.test.tsx 覆盖确保官方 demo 页面本身始终可运行。与其他间距相关属性的配合size解决的是“元素间距”而 Space 还有几个与间距配套的属性见 components/space/index.en-US.md 的 API 表格directionhorizontal默认或vertical决定间距作用的方向垂直布局下row-gap起主要作用wraphorizontal方向下是否自动换行配合row-gap保证换行后行与行之间仍有垂直间距渲染逻辑见 components/space/index.tsxwrap开启时设置flexWrap: wrapsplit在元素之间插入分隔符如分割线与间距叠加使用。三者与size共同构成了 Space 组件完整的间距控制体系size是其中最核心、最常用的入口。小结Space的size属性提供了从三档预设small8px /middle16px /large24px随主题 token 联动到任意数值、再到[水平, 垂直]数组的完整间距控制能力未显式设置时按ConfigProvider.space.size→small的顺序解析默认值最终通过预设类名或内联样式落到 CSSgap属性上。无论是快速布局、精细调间距还是全局统一间距size都是你控制 Space 布局节奏的第一选择。赞分享前端UI组件设计系统【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址https://gitcode.com/gh_mirrors/ant/ant-design点击查看免费下载相关推荐Ant Design Flex 组件 gap 间距指南预设尺寸、自定义数值与主题定制Ant Design Flex 组件 gap 间距指南预设尺寸、自定义数值与主题定制 Flex 是 Ant Design 中用于块级元素布局的容器组件而 g前端UI组件设计系统Ant Design Space 间距控制详解用 size 设置组件间的间距Ant Design Space 间距控制详解用 size 设置组件间的间距 size 是 Ant Design Space https://link.git前端UI组件设计系统ant-design Cascader 级联选择器 size 尺寸配置全解从 size Demo 到源码实现ant design Cascader 级联选择器 size 尺寸配置全解从 size Demo 到源码实现 本文以 ant design 仓库中 compoUI组件前端设计系统创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
