Ant Design Card 与栅格布局配合在系统概览页中构建列式卡片面板【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/gh_mirrors/ant/ant-design导读在 Ant Design 的中后台应用中系统概览页Dashboard / Overview是最常见的页面形态之一若干张承载不同业务指标或模块入口的卡片整齐排列在屏幕中。本篇文章基于 ant-design 仓库中 in-column 示例 及其说明文档 in-column.md系统讲解如何用Card组件与Row/Col栅格体系配合搭建等宽分栏的卡片布局。读完本文你将掌握栅格分栏的核心参数span、gutter、响应式断点的用法、Card无边框模式与loading、hoverable等实战属性以及二者配合时在源码层面的工作原理。示例背后的场景概览页的卡片 栅格范式原文档对示例的描述非常精炼在系统概览页面常常和栅格进行配合Cards usually cooperate with grid column layout in overview page。这句话点出了中后台开发中一个高频且稳定的组合模式概览页通常由多个信息卡片组成而卡片的排布需要借助 24 栏栅格系统来完成对齐与响应式适配。该示例在 Card 组件文档中被标注为 Card in column见 components/card/index.en-US.md与 basic、border-less、loading、grid-card 等示例并列说明它演示的是Card 作为内容容器被放进栅格列的典型用法而不是 Card 内部的网格布局后者由Card.Grid承担。完整示例代码与逐行解读示例完整代码如下来源components/card/demo/in-column.tsximport React from react; import { Card, Col, Row } from antd; const App: React.FC () ( Row gutter{16} Col span{8} Card titleCard title bordered{false} Card content /Card /Col Col span{8} Card titleCard title bordered{false} Card content /Card /Col Col span{8} Card titleCard title bordered{false} Card content /Card /Col /Row ); export default App;结构上它是一个清晰的三层嵌套Row行作为栅格容器负责整体排列与列间距Col列每列span{8}三列恰好铺满 24 栏栅格8 × 3 24实现三等分Card卡片作为每一列的内容容器承载标题与正文。为什么是span{8}24 栏栅格体系的均分原理Ant Design 的栅格基于 24 栏设计Col的span属性表示该列占用的栏数。从 components/grid/col.tsx 的源码可以看到span会被转换为形如ant-col-8的类名由 CSS 计算其宽度百分比const classes classNames( prefixCls, { [${prefixCls}-${span}]: span ! undefined, ... }, ... );因此span{8}即宽度为 8/24 ≈ 33.33%三个Col并排正好占满一行。若需要四列可改为四个span{6}两列则用两个span{12}。这一换算逻辑是栅格布局中最基础也最常用的规则。gutter{16}列间距的真实作用方式Row的gutter属性控制相邻列之间的水平间距。在 components/grid/row.tsx 中可以看到它的实现机制const horizontalGutter gutters[0] ! null gutters[0] 0 ? gutters[0] / -2 : undefined; if (horizontalGutter) { rowStyle.marginLeft horizontalGutter; rowStyle.marginRight horizontalGutter; }即Row把gutter的一半以负外边距margin-left/right: -8px向外扩展同时通过RowContext将间距值传给子Colcomponents/grid/RowContext.tsCol侧则把gutter[0] / 2作为内边距padding-left/right: 8px应用见 components/grid/col.tsxif (gutter gutter[0] 0) { const horizontalGutter gutter[0] / 2; mergedStyle.paddingLeft horizontalGutter; mergedStyle.paddingRight horizontalGutter; }行负外边距 列内边距的组合保证了卡片之间始终有 16px 的视觉间距而第一列左侧与最后一列右侧不会产生多余偏移。这正是gutter看似简单、实现却很讲究的地方理解它有助于你排查为什么卡片间距比预期大/小一类的问题。此外gutter还支持响应式对象与垂直间距gutter{{ xs: 8, sm: 16, md: 24 }}可按断点切换间距gutter{[16, 24]}的数组写法中第二个值表示行间距rowGap见 row.tsx。其类型定义可参考 RowProps。让概览卡片真正用起来Card 常用属性示例中只使用了title与bordered两个属性但在真实的概览页中卡片通常还需要更多配置。以下属性均来自 Card API 文档 并可追溯至 components/card/Card.tsx 的CardProps定义属性说明类型默认值title卡片标题位于卡片头部左侧ReactNode-extra头部右侧额外内容如查看全部链接ReactNode-bordered是否渲染边框booleantruehoverable悬停时卡片浮起适合可点击的模块入口booleanfalseloading数据未返回时展示骨架屏占位booleanfalsesize卡片尺寸default或smallCardSizedefaultactions底部操作区如编辑、删除ReactNode[]-cover卡片封面图ReactNode-type卡片风格可设为inner内嵌卡片CardType-bordered{false}无边框卡片的适用场景示例特意在每张卡片上设置bordered{false}。从 Card.tsx 可以看到bordered控制的是ant-card-bordered这个修饰类名的有无{ [${prefixCls}-bordered]: bordered, [${prefixCls}-hoverable]: hoverable, ... }在浅灰背景如backgroundgrey的概览页中去掉卡片边框、仅以白色卡片浮于灰底之上视觉上更干净、更符合当前流行的卡片式仪表盘风格。同时要注意示例中把无边框与栅格间距配合使用卡片之间的分隔完全依赖gutter产生的留白因此间距值此处为 16px不宜过小否则卡片边界会难以分辨。loading与hoverable概览页的两大高频增强概览页的数据通常异步加载此时给卡片加loading是标准做法。源码中loading为true时卡片 body 会用Skeleton骨架屏替换真实内容Card.tsxconst loadingBlock ( Skeleton loading active paragraph{{ rows: 4 }} title{false} {children} /Skeleton );如果卡片同时作为可点击的功能入口例如跳转到某个子模块可以叠加hoverable属性获得悬停浮起效果。二者可以与其他属性自由组合例如Row gutter{[16, 16]} Col xs{24} sm{12} lg{8} Card title订单统计 bordered{false} hoverable loading{loading} ... /Card /Col ... /Row进阶响应式断点与栅格卡片的取舍为概览页添加响应式断点示例中固定使用span{8}在窄屏上三列会过于拥挤。Col提供了xs/sm/md/lg/xl/xxl六个断点属性见 col.tsx 的ColProps支持传入数字等价于该断点下的span或包含span/offset/order等键的对象Row gutter{[16, 16]} Col xs{24} sm{12} lg{8} Card titleCard title bordered{false}Card content/Card /Col Col xs{24} sm{12} lg{8} Card titleCard title bordered{false}Card content/Card /Col Col xs{24} sm{12} lg{8} Card titleCard title bordered{false}Card content/Card /Col /Row这样在小屏xs时每张卡片占满一行中屏sm两列并排大屏lg恢复三列。从 col.tsx 的源码可以看到每个断点属性都会生成对应的ant-col-{size}-{value}类名配合响应式 CSS 媒体查询生效无需任何额外 JS。与Card.Grid的区别如果需求是一张卡片内部划分多个格子例如一个总览卡片里放多个指标块应当使用Card.Grid而不是外层Row/Col。参考官方 grid-card 示例Card titleCard Title Card.Grid style{{ width: 25%, textAlign: center }}Content/Card.Grid Card.Grid hoverable{false} style{gridStyle}Content/Card.Grid ... /Card从源码看Card.Grid渲染为带ant-card-grid类名的 div并由 Card 组件通过isContainGrid检测是否包含 Grid 子元素来附加ant-card-contain-grid类Card.tsx从而应用网格分隔样式其hoverable默认值为truecomponents/card/Grid.tsx。两者的选择标准很清晰多张独立卡片排布本文主题→RowColCard一张卡片内部多区块→Card.Grid。验证与延伸从测试用例看组件约定ant-design 仓库为 Card 提供了完整的单元测试components/card/tests/index.test.tsx其中几个用例可以帮助你理解本文涉及属性的行为约定get ref of card验证渲染出的根节点带有ant-card类说明 Card 直接输出原生div结构should support custom className与should support custom styles验证了classNames/styles对头部等模块的定制能力tab size extend card size验证sizesmall时内部 Tabs 同步缩小佐证size属性会贯通到子模块。如果你在集成时遇到问题可以参考 tests/utils.tsx 了解仓库统一测试渲染方式也可以阅读 Card 完整 API 文档 获取actions、tabList、classNames/styles等更多能力的说明。小结Card 栅格是 Ant Design 概览页布局的标准答案。通过本示例可以提炼出一套可复用的落地模板用Row管理间距与换行用Col的span或断点属性控制列宽与响应式行为再用Card承载每列内容并配合bordered{false}、loading、hoverable等属性完善交互与加载体验。掌握 24 栏均分、gutter的负边距机制以及Card常用属性后你就能快速搭建出专业、一致且响应式的系统概览页面。【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/gh_mirrors/ant/ant-design创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考