3 步让 Ant Design 紧凑模式生效界面信息密度提升指南【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/GitHub_Trending/an/ant-design当登录页的表单长到要滚动两屏、列表页的表格拉出横向滚动条你会不会觉得界面太松了这正是 Ant Design 紧凑模式要解决的问题用一套主题算法把控件高度、内边距和组件间距整体收紧让同一块屏幕装进更多信息而不必逐个组件手写样式。它不是某个组件的私有属性而是 Ant Design v5 主题体系里的一个可插拔算法随时能开、能关、能组合。紧凑模式到底改了什么可以把紧凑模式理解成给界面做瘦身套餐它不动布局结构只把视觉上的留白压缩。你无需理解内部只需记住三件事——控件变矮、间距变紧、字号略小。核心机制是主题里多挂了一个compactAlgorithm紧凑算法它会重新计算所有尺寸令牌Token即一套可复用的设计变量视觉参数默认主题紧凑主题变化控件高度 controlHeight32px28px-4px间距步进 sizeStep86-2字号基准fontSize14pxfontSizeSM12px整体缩小圆角 / 边距默认标尺随 size 标尺同步收缩更紧也就是说一个 32px 高的按钮在紧凑主题下变成 28px原本 8 倍单位的间距缩到 6 倍单位。收益是量化可测的同一屏里按钮、输入框、表格行都能少占 20% 左右的高度密集表格一屏多装数行数据。提示紧凑是减法不是变形。对齐方式、层级关系、交互反馈都保持不变变的只是留白大小。5 分钟开启全局紧凑模式想最快看到效果给整个应用挂上紧凑算法即可。下面这段示例演示了如何用ConfigProvider一键启用全局紧凑包住的控件都会自动变矮变紧import { theme, ConfigProvider, Button, Input, Space } from antd; export default () ( ConfigProvider theme{{ algorithm: theme.compactAlgorithm }} Space Input placeholder搜索关键词 / Button typeprimary查询/Button Button重置/Button /Space /ConfigProvider );保存后刷新页面你会发现按钮、输入框立刻矮了一圈组件间的呼吸感也收拢了。如果你只是想让某一块区域紧凑、其余保持默认就跳到下节的局部方案别急着全局改——全量收紧会让轻量的展示页也显得拥挤。三个高频场景的紧凑用法列表页搜索区用 Space.Compact 局部收紧后台列表页最常见的松是搜索区按钮之间空着一大截。用Space.Compact紧凑容器把输入框和按钮包住它们会拼成一条无缝的整体首尾自动处理圆角中间消除边框缝隙。下面这段演示了搜索区局部紧凑import { Space, Input, Button } from antd; export default () ( Space.Compact Input placeholder请输入关键词 / Button typeprimary搜索/Button Button重置/Button /Space.Compact );录入表单紧凑主题叠加 size 属性数据录入页字段多单靠全局紧凑有时还不够。你可以在紧凑主题之上再给控件传sizesmall双管齐下进一步压缩行高与垂直间距。表格同理给Table设sizesmall行高从默认再降一档。这段示例演示了紧凑主题下表格的小号尺寸import { Table } from antd; export default () ( Table sizesmall columns{columns} dataSource{data} pagination{{ pageSize: 20 }} / );自定义控件接入紧凑你自己封装的组件默认不认识紧凑上下文。Ant Design 通过 ContextReact 里跨组件传值的机制把紧凑信息往下传你的组件可以用useCompactItemContext钩子接住它按传来的尺寸调整自身。下面这段演示了自定义输入控件如何读取紧凑信息import { useCompactItemContext } from antd/es/space/Compact; export default function MyField() { const { compactSize, compactItemClassnames } useCompactItemContext(my-field); return ( div className{compactItemClassnames} {/* 根据 compactSize 调整内部高度 */} /div ); }compactItemClassnames会自动带上-first-item/-last-item之类的类名帮你处理拼在一条里的圆角与边框省去手写判断。翻车了按这三步自查 紧凑后最常见的两类翻车边框缺失/重叠、间距忽大忽小。九成情况是首尾样式没对上。排查路径可以固定成三步先看容器是不是Space.Compact的直接子级——只有直接子组件才会被注入紧凑上下文中间多包一层普通div就会断链。再看首尾类名有没有生效——检查 DOM 上是否带-first-item、-last-item缺了通常说明层级或key没传对。最后看是否误混了尺寸——同一组里混用了不同size会破坏整体对齐建议组内统一尺寸。若确实需要在紧凑里恢复某一块默认可以用NoCompactStyle包裹该区域它会临时中断紧凑继承只影响被包住的子树。自查口诀容器要直接、首尾要成对、尺寸要统一。边界与进阶哪些场景别用紧凑不是越密越好。这几类场景建议克制阅读型长文、营销落地页用户需要舒缓的留白强行紧凑反而降低可读性。已有自定义间距体系的页面你的组件若依赖固定 margin/padding挂上紧凑算法后这些手写值不会跟着缩会出现半紧半松的割裂感。需要大点击热区的触屏场景控件矮了触控目标也更小移动端建议保留默认高度。进阶玩法是组合算法。紧凑算法可与暗色算法叠加得到又暗又紧的主题你也可以在theme里用algorithm数组同时传入多个算法自由搭配。想更细地调某个令牌就在紧凑基础上用token覆盖单个变量即可无需重写整套算法。选型建议按角色一句话新手先在你最想省空间的那一块用Space.Compact试试别一上来就改全局效果可控、随时能撤。中后台开发者列表页、录入表单优先上紧凑主题 sizesmall的组合信息密度提升最明显改造成本也最低。架构评审把紧凑作为可选主题算法下发让业务侧按页面密度自行启用或叠加别在入口层写死保留全局开关与恢复能力。把紧凑当成一个可开关的密度旋钮按页面需求拧而不是全量拧到底你的界面就会既省空间又不丢舒适度。【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/GitHub_Trending/an/ant-design创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 3 步让 Ant Design 紧凑模式生效：界面信息密度提升指南
3 步让 Ant Design 紧凑模式生效界面信息密度提升指南【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/GitHub_Trending/an/ant-design当登录页的表单长到要滚动两屏、列表页的表格拉出横向滚动条你会不会觉得界面太松了这正是 Ant Design 紧凑模式要解决的问题用一套主题算法把控件高度、内边距和组件间距整体收紧让同一块屏幕装进更多信息而不必逐个组件手写样式。它不是某个组件的私有属性而是 Ant Design v5 主题体系里的一个可插拔算法随时能开、能关、能组合。紧凑模式到底改了什么可以把紧凑模式理解成给界面做瘦身套餐它不动布局结构只把视觉上的留白压缩。你无需理解内部只需记住三件事——控件变矮、间距变紧、字号略小。核心机制是主题里多挂了一个compactAlgorithm紧凑算法它会重新计算所有尺寸令牌Token即一套可复用的设计变量视觉参数默认主题紧凑主题变化控件高度 controlHeight32px28px-4px间距步进 sizeStep86-2字号基准fontSize14pxfontSizeSM12px整体缩小圆角 / 边距默认标尺随 size 标尺同步收缩更紧也就是说一个 32px 高的按钮在紧凑主题下变成 28px原本 8 倍单位的间距缩到 6 倍单位。收益是量化可测的同一屏里按钮、输入框、表格行都能少占 20% 左右的高度密集表格一屏多装数行数据。提示紧凑是减法不是变形。对齐方式、层级关系、交互反馈都保持不变变的只是留白大小。5 分钟开启全局紧凑模式想最快看到效果给整个应用挂上紧凑算法即可。下面这段示例演示了如何用ConfigProvider一键启用全局紧凑包住的控件都会自动变矮变紧import { theme, ConfigProvider, Button, Input, Space } from antd; export default () ( ConfigProvider theme{{ algorithm: theme.compactAlgorithm }} Space Input placeholder搜索关键词 / Button typeprimary查询/Button Button重置/Button /Space /ConfigProvider );保存后刷新页面你会发现按钮、输入框立刻矮了一圈组件间的呼吸感也收拢了。如果你只是想让某一块区域紧凑、其余保持默认就跳到下节的局部方案别急着全局改——全量收紧会让轻量的展示页也显得拥挤。三个高频场景的紧凑用法列表页搜索区用 Space.Compact 局部收紧后台列表页最常见的松是搜索区按钮之间空着一大截。用Space.Compact紧凑容器把输入框和按钮包住它们会拼成一条无缝的整体首尾自动处理圆角中间消除边框缝隙。下面这段演示了搜索区局部紧凑import { Space, Input, Button } from antd; export default () ( Space.Compact Input placeholder请输入关键词 / Button typeprimary搜索/Button Button重置/Button /Space.Compact );录入表单紧凑主题叠加 size 属性数据录入页字段多单靠全局紧凑有时还不够。你可以在紧凑主题之上再给控件传sizesmall双管齐下进一步压缩行高与垂直间距。表格同理给Table设sizesmall行高从默认再降一档。这段示例演示了紧凑主题下表格的小号尺寸import { Table } from antd; export default () ( Table sizesmall columns{columns} dataSource{data} pagination{{ pageSize: 20 }} / );自定义控件接入紧凑你自己封装的组件默认不认识紧凑上下文。Ant Design 通过 ContextReact 里跨组件传值的机制把紧凑信息往下传你的组件可以用useCompactItemContext钩子接住它按传来的尺寸调整自身。下面这段演示了自定义输入控件如何读取紧凑信息import { useCompactItemContext } from antd/es/space/Compact; export default function MyField() { const { compactSize, compactItemClassnames } useCompactItemContext(my-field); return ( div className{compactItemClassnames} {/* 根据 compactSize 调整内部高度 */} /div ); }compactItemClassnames会自动带上-first-item/-last-item之类的类名帮你处理拼在一条里的圆角与边框省去手写判断。翻车了按这三步自查 紧凑后最常见的两类翻车边框缺失/重叠、间距忽大忽小。九成情况是首尾样式没对上。排查路径可以固定成三步先看容器是不是Space.Compact的直接子级——只有直接子组件才会被注入紧凑上下文中间多包一层普通div就会断链。再看首尾类名有没有生效——检查 DOM 上是否带-first-item、-last-item缺了通常说明层级或key没传对。最后看是否误混了尺寸——同一组里混用了不同size会破坏整体对齐建议组内统一尺寸。若确实需要在紧凑里恢复某一块默认可以用NoCompactStyle包裹该区域它会临时中断紧凑继承只影响被包住的子树。自查口诀容器要直接、首尾要成对、尺寸要统一。边界与进阶哪些场景别用紧凑不是越密越好。这几类场景建议克制阅读型长文、营销落地页用户需要舒缓的留白强行紧凑反而降低可读性。已有自定义间距体系的页面你的组件若依赖固定 margin/padding挂上紧凑算法后这些手写值不会跟着缩会出现半紧半松的割裂感。需要大点击热区的触屏场景控件矮了触控目标也更小移动端建议保留默认高度。进阶玩法是组合算法。紧凑算法可与暗色算法叠加得到又暗又紧的主题你也可以在theme里用algorithm数组同时传入多个算法自由搭配。想更细地调某个令牌就在紧凑基础上用token覆盖单个变量即可无需重写整套算法。选型建议按角色一句话新手先在你最想省空间的那一块用Space.Compact试试别一上来就改全局效果可控、随时能撤。中后台开发者列表页、录入表单优先上紧凑主题 sizesmall的组合信息密度提升最明显改造成本也最低。架构评审把紧凑作为可选主题算法下发让业务侧按页面密度自行启用或叠加别在入口层写死保留全局开关与恢复能力。把紧凑当成一个可开关的密度旋钮按页面需求拧而不是全量拧到底你的界面就会既省空间又不丢舒适度。【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/GitHub_Trending/an/ant-design创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考