Ant Design 紧凑模式3 种开关 4 个坑一次讲清【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/GitHub_Trending/an/ant-design屏幕空间有限、内容却越堆越多Ant Design 紧凑模式把控件高度从 32px 压到 28px、字号从 14px 降到 12px同一块屏幕大约能多塞 10%~15% 的内容而且不用缩小字体、不用压掉点击区域。本文给你 3 种粒度的开启方式和最常见的 4 个坑看完你自己就能判断该用哪种、样式坏了怎么查。一、先对号入座你的界面卡在哪儿判断该用哪种紧凑方式先看瓶颈在哪表格太挤、行与行之间喘不过气行高不归紧凑算法管归Table的size属性管。sizemiddle比默认矮一档sizesmall再矮一档先调它再考虑全局紧凑模式两者叠加收益最明显。表单太长字段一个摞一个表单级做法给Form加sizesmall调低所有控件高度再把挨在一起的输入框、下拉、按钮用Space.Compact包起来字段之间贴边、边框不再重叠。适合审批单、入库登记这类字段密集且顺序固定的录入页。整站风格要统一在ConfigProvider里挂紧凑算法见第六节全站控件一起变矮。适合监控大屏、库存管理后台这种从头看到尾都在看数据的界面。二、三分钟上手Space.Compact 最短示例AntD 紧凑模式怎么开最小的改动就是给相邻控件套一层Space.Compactimport { Space, Input, Button } from antd; const FilterBar () ( Space.Compact Input placeholder输入仓库编号 / Button typeprimary查询库存/Button Button重置/Button /Space.Compact );三个组件拼成一根连续的条输入框在左两个按钮贴右首尾圆角和中间边框自动处理你不需要写任何样式。什么时候该用2~5 个相邻控件的成组场景筛选栏、工具条、连续输入这是影响范围最可控的紧凑方式。什么时候别用别包整页。Space.Compact只管挨在一起的一组外层间距和文字大小不归它管包整页会丢失间距控制。三、三种力度怎么选局部、表单、全局力度开关方式管什么适合别用在哪局部Space.Compact把挨着的一组控件拼成一体贴边、去重叠边框、统一圆角筛选栏、工具条、审批单里挨着的字段只有一两个控件的零散场景包了反而多一层嵌套表单Form的sizesmall 关键处Space.Compact调低表单内所有控件高度再让相邻字段贴边字段多的录入页审批单、入库登记表单只有一两个字段时直接小尺寸即可不必加Space.Compact全局ConfigProvider的theme.algorithm挂compactAlgorithm全站控件高度和间距批量变小界面信息密度整体提升监控大屏、库存管理后台这类长期盯数据的系统营销页、文档页和数据界面混站里的站点全变矮会风格混乱单控件层面还有一个零成本选项sizesmall。它只是把某个控件调小不做拼接改动最轻但收益也最小。四、它是怎么变瘦的机制一瞥两个词先解释一下Token是 AntD 内部的一组设计变量高度、字号、间距改 Token 等于批量改样式Context是 React 跨层级传值的方式父级放进去的值任意深度的子组件都能取到不用逐层透传。Space.Compact的工作就是往下传 Context源码在 components/space/Compact.tsx// 组件内部逻辑的简化版 const ctx React.createContext(null); // 存方向、首尾标记、尺寸 // 每个子控件拿到后拼出类名 // ant-input-compact-item 我是紧凑组的一员 // ant-input-compact-first-item 我是首项保留左上/左下圆角 // ant-input-compact-last-item 我是尾项保留右上/右下圆角样式根据这些类名把圆角和边框接起来拼接感就是这么来的。全局紧凑走的是另一条路compactAlgorithm本质是批量改写 Token 的函数源码在 components/theme/themes/compact/index.ts核心动作就一行const controlHeight mergedMapToken.controlHeight - 4;controlHeight从 32 降到 28字号基准降到 12px所有读这些 Token 的组件跟着变矮。记住一句话局部拼接靠类名整体变矮靠 Token所以全局紧凑和局部Space.Compact可以叠加。五、避坑清单最常被问的 4 个问题首尾边框断裂怎么修某个控件缺圆角或边框重叠打开开发者工具看 DOM正常的首项应带ant-input-compact-first-item这类类名。类名没了多半是结构变了——控件外面多包了一层divSpace.Compact的第一个直接子节点变成了那层div而不是控件本身首尾标记就标错位置了。去掉多余包裹层即可。自定义组件怎么进紧凑组自己的组件不会自动响应紧凑组需要主动调用useCompactItemContext同样从 components/space/Compact.tsx 导出import { useCompactItemContext } from antd/es/space/Compact; const MyWidget () { const { compactSize, compactItemClassnames } useCompactItemContext(mywidget, horizontal); return div className{compactItemClassnames}/* 按 compactSize 调自身高度 *//div; };不做这步的后果别人都变矮了只有它还是标准高度整组像缺了一块。嵌套紧凑组谁覆盖谁Space.Compact可以嵌在另一个Space.Compact里首尾标记会按嵌套逻辑计算外层是首项、内层又是首项才标first-item。两层以内一般没问题嵌套三层以上容易出重复圆角或缺角建议一个分组内最多嵌套一层内层分组圆角不对就拆出来单独放。另外局部想退出紧凑时官方留了NoCompactStyle用它包一层即可中断继承。控件变矮后点击区过小sizesmall的按钮加紧凑高度后点击区域会接近 24px鼠标用户没问题触控设备容易点空。触控为主的界面要么保持默认尺寸要么给关键按钮补最小宽高字号 12px 是紧凑算法的下限不要再手动往下压否则可读性先于省下的空间消失。六、进阶按需微调紧凑参数compactAlgorithm只是把controlHeight减 4、字号基准降到 12 的固定函数。想要30px 的中间档位把它复制一份改成自己的函数再传给algorithm就行多个算法按数组顺序叠加生效import { theme, ConfigProvider } from antd; const { compactAlgorithm, darkAlgorithm } theme; ConfigProvider theme{{ algorithm: [compactAlgorithm, darkAlgorithm] }} App / /ConfigProvider这就是 compactAlgorithm 配置的全部用法。注意自定义算法一改全站组件都跟着变表格、表单、弹框都要重新走一遍视觉检查先在预发环境确认再合码。上线前自检清单每个紧凑组的首尾控件圆角连续中间没有重叠边框小尺寸下 12px 文字仍可读行高没有贴字自定义组件已接入useCompactItemContext高度与相邻组件一致暗色主题下紧凑样式无破图、无白色残留边框触控场景关键按钮点击区不小于 24×24px各组件的紧凑样式修补分散在多个版本里改动前先翻 CHANGELOG.zh-CN.md 里 compact 相关条目整体用法和 Token 说明见 docs/react/customize-theme.zh-CN.md 的紧凑算法章节。建议从Space.Compact开始只包住最挤的那一两组控件确认效果后再决定要不要把紧凑算法挂到全站。【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/GitHub_Trending/an/ant-design创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Ant Design 紧凑模式：3 种开关 + 4 个坑一次讲清
Ant Design 紧凑模式3 种开关 4 个坑一次讲清【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/GitHub_Trending/an/ant-design屏幕空间有限、内容却越堆越多Ant Design 紧凑模式把控件高度从 32px 压到 28px、字号从 14px 降到 12px同一块屏幕大约能多塞 10%~15% 的内容而且不用缩小字体、不用压掉点击区域。本文给你 3 种粒度的开启方式和最常见的 4 个坑看完你自己就能判断该用哪种、样式坏了怎么查。一、先对号入座你的界面卡在哪儿判断该用哪种紧凑方式先看瓶颈在哪表格太挤、行与行之间喘不过气行高不归紧凑算法管归Table的size属性管。sizemiddle比默认矮一档sizesmall再矮一档先调它再考虑全局紧凑模式两者叠加收益最明显。表单太长字段一个摞一个表单级做法给Form加sizesmall调低所有控件高度再把挨在一起的输入框、下拉、按钮用Space.Compact包起来字段之间贴边、边框不再重叠。适合审批单、入库登记这类字段密集且顺序固定的录入页。整站风格要统一在ConfigProvider里挂紧凑算法见第六节全站控件一起变矮。适合监控大屏、库存管理后台这种从头看到尾都在看数据的界面。二、三分钟上手Space.Compact 最短示例AntD 紧凑模式怎么开最小的改动就是给相邻控件套一层Space.Compactimport { Space, Input, Button } from antd; const FilterBar () ( Space.Compact Input placeholder输入仓库编号 / Button typeprimary查询库存/Button Button重置/Button /Space.Compact );三个组件拼成一根连续的条输入框在左两个按钮贴右首尾圆角和中间边框自动处理你不需要写任何样式。什么时候该用2~5 个相邻控件的成组场景筛选栏、工具条、连续输入这是影响范围最可控的紧凑方式。什么时候别用别包整页。Space.Compact只管挨在一起的一组外层间距和文字大小不归它管包整页会丢失间距控制。三、三种力度怎么选局部、表单、全局力度开关方式管什么适合别用在哪局部Space.Compact把挨着的一组控件拼成一体贴边、去重叠边框、统一圆角筛选栏、工具条、审批单里挨着的字段只有一两个控件的零散场景包了反而多一层嵌套表单Form的sizesmall 关键处Space.Compact调低表单内所有控件高度再让相邻字段贴边字段多的录入页审批单、入库登记表单只有一两个字段时直接小尺寸即可不必加Space.Compact全局ConfigProvider的theme.algorithm挂compactAlgorithm全站控件高度和间距批量变小界面信息密度整体提升监控大屏、库存管理后台这类长期盯数据的系统营销页、文档页和数据界面混站里的站点全变矮会风格混乱单控件层面还有一个零成本选项sizesmall。它只是把某个控件调小不做拼接改动最轻但收益也最小。四、它是怎么变瘦的机制一瞥两个词先解释一下Token是 AntD 内部的一组设计变量高度、字号、间距改 Token 等于批量改样式Context是 React 跨层级传值的方式父级放进去的值任意深度的子组件都能取到不用逐层透传。Space.Compact的工作就是往下传 Context源码在 components/space/Compact.tsx// 组件内部逻辑的简化版 const ctx React.createContext(null); // 存方向、首尾标记、尺寸 // 每个子控件拿到后拼出类名 // ant-input-compact-item 我是紧凑组的一员 // ant-input-compact-first-item 我是首项保留左上/左下圆角 // ant-input-compact-last-item 我是尾项保留右上/右下圆角样式根据这些类名把圆角和边框接起来拼接感就是这么来的。全局紧凑走的是另一条路compactAlgorithm本质是批量改写 Token 的函数源码在 components/theme/themes/compact/index.ts核心动作就一行const controlHeight mergedMapToken.controlHeight - 4;controlHeight从 32 降到 28字号基准降到 12px所有读这些 Token 的组件跟着变矮。记住一句话局部拼接靠类名整体变矮靠 Token所以全局紧凑和局部Space.Compact可以叠加。五、避坑清单最常被问的 4 个问题首尾边框断裂怎么修某个控件缺圆角或边框重叠打开开发者工具看 DOM正常的首项应带ant-input-compact-first-item这类类名。类名没了多半是结构变了——控件外面多包了一层divSpace.Compact的第一个直接子节点变成了那层div而不是控件本身首尾标记就标错位置了。去掉多余包裹层即可。自定义组件怎么进紧凑组自己的组件不会自动响应紧凑组需要主动调用useCompactItemContext同样从 components/space/Compact.tsx 导出import { useCompactItemContext } from antd/es/space/Compact; const MyWidget () { const { compactSize, compactItemClassnames } useCompactItemContext(mywidget, horizontal); return div className{compactItemClassnames}/* 按 compactSize 调自身高度 *//div; };不做这步的后果别人都变矮了只有它还是标准高度整组像缺了一块。嵌套紧凑组谁覆盖谁Space.Compact可以嵌在另一个Space.Compact里首尾标记会按嵌套逻辑计算外层是首项、内层又是首项才标first-item。两层以内一般没问题嵌套三层以上容易出重复圆角或缺角建议一个分组内最多嵌套一层内层分组圆角不对就拆出来单独放。另外局部想退出紧凑时官方留了NoCompactStyle用它包一层即可中断继承。控件变矮后点击区过小sizesmall的按钮加紧凑高度后点击区域会接近 24px鼠标用户没问题触控设备容易点空。触控为主的界面要么保持默认尺寸要么给关键按钮补最小宽高字号 12px 是紧凑算法的下限不要再手动往下压否则可读性先于省下的空间消失。六、进阶按需微调紧凑参数compactAlgorithm只是把controlHeight减 4、字号基准降到 12 的固定函数。想要30px 的中间档位把它复制一份改成自己的函数再传给algorithm就行多个算法按数组顺序叠加生效import { theme, ConfigProvider } from antd; const { compactAlgorithm, darkAlgorithm } theme; ConfigProvider theme{{ algorithm: [compactAlgorithm, darkAlgorithm] }} App / /ConfigProvider这就是 compactAlgorithm 配置的全部用法。注意自定义算法一改全站组件都跟着变表格、表单、弹框都要重新走一遍视觉检查先在预发环境确认再合码。上线前自检清单每个紧凑组的首尾控件圆角连续中间没有重叠边框小尺寸下 12px 文字仍可读行高没有贴字自定义组件已接入useCompactItemContext高度与相邻组件一致暗色主题下紧凑样式无破图、无白色残留边框触控场景关键按钮点击区不小于 24×24px各组件的紧凑样式修补分散在多个版本里改动前先翻 CHANGELOG.zh-CN.md 里 compact 相关条目整体用法和 Token 说明见 docs/react/customize-theme.zh-CN.md 的紧凑算法章节。建议从Space.Compact开始只包住最挤的那一两组控件确认效果后再决定要不要把紧凑算法挂到全站。【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/GitHub_Trending/an/ant-design创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考