Ant Design Card 典型卡片实践标题、extra 操作区与 medium/small 双尺寸的完整解析【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/GitHub_Trending/an/ant-design本篇基于 ant-design 仓库中 Card 组件的典型卡片basic演示文档展开讲解如何用一个包含标题title、正文内容children与右上角操作区extra的标准卡片结构配合size属性切换medium/small两种尺寸。读完本文你将不仅掌握该演示的完整可运行代码还能从 Card 组件源码 与 样式层实现 层面理解头部渲染条件、尺寸合并机制和 Design Token 的具体取值。典型卡片演示文档定义与完整代码典型卡片演示说明 对该 demo 的定义非常明确zh-CN包含标题、内容、操作区域。en-USA basic card containing a title, content and an extra corner content. Supports two sizes:mediumandsmall.也就是说这个演示要回答的问题只有两个一张标准卡片由哪几部分构成以及两种尺寸有何差异。它对应的实现文件是 basic.tsx完整代码如下import React from react; import { Card, Space } from antd; const App: React.FC () ( Space vertical size{16} Card titleDefault size card extra{a href#More/a} style{{ width: 300 }} pCard content/p pCard content/p pCard content/p /Card Card sizesmall titleSmall size card extra{a href#More/a} style{{ width: 300 }} pCard content/p pCard content/p pCard content/p /Card /Space ); export default App;代码中的三个关键要素与演示说明一一对应标题titleDefault size card渲染在卡片头部左侧操作区域extra{a href#More/a}渲染在卡片头部右侧两种尺寸第一张卡片未设置size即默认的medium第二张显式设置sizesmall两者通过外层Space vertical size{16}垂直排列、间距 16px便于直观对比。官方文档 Card 中文文档 将何时使用概括为最基础的卡片容器可承载文字、列表、图片、段落常用于后台概览页面。basic 演示正是这一场景的最小完整示例。源码层面头部何时渲染、各区域如何落位打开 Card.tsx可以确认演示中每个属性对应的真实渲染逻辑。头部的渲染条件Card 并非无条件渲染头部。源码中Card.tsx的判定是if (isReactRenderable(title) || isReactRenderable(extra) || tabs) { // 渲染 div classant-card-head // 内部为 ant-card-head-wrapper包含 ant-card-head-title 与 ant-card-extra }即title、extra或tabList对应 Tabs三者只要有一个可渲染就会生成ant-card-head结构basic 演示同时提供了title和extra因此头部必然出现。头部内部采用 flex 布局title容器flex: 1并带文本省略extra容器通过marginInlineStart: auto贴到头部右侧见 style/index.ts 中-extra样式这就是右上角操作区的实现来源。body 的渲染条件正文区域同样有判空逻辑Card.tsx只有loading为 true 或存在 children 时才渲染ant-card-body。basic 演示中每张卡片都有三个p子节点因此 body 正常输出如果你传入的卡片没有任何内容且未开loadingDOM 中不会出现 body 节点——这一点在排查卡片底部圆角/高度异常类问题时值得留意。最终 DOM 顺序组件返回的根节点按固定顺序拼装Card.tsxdiv ref{ref} {...divProps} className{classString} style{mergedStyle} {head} // ant-card-headtitle extra 可选 Tabs {coverDom} // ant-card-cover {body} // ant-card-body {actionDom} // ant-card-actions /divbasic 演示未使用cover与actions所以实际 DOM 只有head body两段。根节点类名还会按状态附加修饰类其中与尺寸相关的是ant-card-smallmergedSize small时添加见 Card.tsx。两种尺寸medium 与 small 的实现机制演示说明中强调的Supports two sizes:mediumandsmall在源码中有清晰的类型与样式对应关系。类型定义与 deprecated 值Card.tsx 中尺寸类型定义为/** * Note: default is deprecated and will be removed in v7, please use medium instead. */ export type CardSize ExcludeSizeType, large | default;即合法值为medium、small以及仅作向后兼容、将在 v7 移除的default。组件在非生产环境下会对sizedefault发出弃用警告Card.tsxwarning.deprecated(customizeSize ! default, sizedefault, sizemedium);如果你的旧项目里还有sizedefault的写法建议统一替换为sizemedium。尺寸如何生效useSize 与 ConfigProvider 全局尺寸组件内通过useSize(customizeSize)合并出最终尺寸Card.tsx。查看 useSize 的实现可以推断其优先级未传size时取SizeContext提供的全局尺寸——即 ConfigProvider 的componentSize显式传入字符串时以组件自身的size为准传入函数时允许基于全局尺寸做动态计算。因此 basic 演示中第一张Default size card显示为 medium前提是全局componentSize也为mediumCard 文档 API 表中size的默认值即为medium见 index.zh-CN.md。若在 ConfigProvider 中设置了componentSizesmall未显式指定size的卡片会整体跟随变小。small 尺寸到底改了什么ant-card-small对应的样式集中在 style/index.ts 的genCardSizeStyle中只影响两处[${componentCls}-small]: { [ ${componentCls}-head]: { minHeight: headerHeightSM, padding: 0 ${unit(headerPaddingSM)}, fontSize: headerFontSizeSM, // 头部 extra 保持正文字号不变 }, [ ${componentCls}-body]: { padding: bodyPaddingSM, }, },具体数值来自组件 Token 默认值style/index.tsToken默认值说明headerHeightfontSizeLG * lineHeightLG padding * 2medium 头部最小高度headerHeightSMfontSize * lineHeight paddingXS * 2small 头部最小高度headerFontSize/headerFontSizeSMfontSizeLG/fontSize头部字号随尺寸缩小bodyPaddingtoken.bodyPadding ?? paddingLGmedium 内容区内边距bodyPaddingSM/headerPaddingSM12固定值small 的内容区/头部内边距可以看到small 模式通过更小的头部高度、字号与 12px 内边距压缩纵向空间适合信息密集、卡片数量多的后台概览页而 extra 区域字号在 small 模式下特意保持fontSize不变保证操作入口的可读性。另外尺寸还会联动内部 TabsCard.tsx 中const tabSize mergedSize ! small ? large : mergedSize;——medium 卡片内的页签使用 large 尺寸small 卡片内则用 smallbasic 演示虽未用tabList但这个联动对带页签的卡片场景同样适用。basic 演示涉及的核心参数速查围绕该演示用到的参数结合 Card 官方 API 表 整理如下参数说明类型默认值title卡片标题ReactNode-extra卡片右上角的操作区域ReactNode-size卡片尺寸medium|smallmediumvariant形态变体替代已废弃的borderedoutlined|borderlessoutlinedloading内容加载中时展示 Skeleton 占位booleanfalsehoverable鼠标移过时可浮起booleanfalsechildren卡片内容basic 演示的三个pReactNode-两点补充bordered 已废弃源码中对bordered、headStyle、bodyStyle均有弃用警告Card.tsx分别建议改用variant、styles.header、styles.body。basic 演示采用的是默认outlined边框形态无边框写法可参考同目录的 border-less 演示。loading 的占位实现开启loading后body 内容会被包裹在一个Skeleton active paragraph{{ rows: 4 }} title{false}中Card.tsx演示目录中的 loading 演示 展示了这一效果。验证方式与继续深入的路径测试保障仓库通过共享的 demo 测试对全部演示含 basic做快照与运行校验demo.test.ts 仅一行demoTest(card)其快照存放在tests/snapshots下。当你修改 Card 或演示代码时可运行仓库既有的测试命令验证 basic 演示的渲染结果是否与快照一致适用于 Node 环境下的 vitest/jest 配置参见仓库根目录 vitest.config.ts。从 basic 出发的进阶演示basic 演示是 Card 能力的最小集Card 文档 列出的其他演示可作为直接扩展路径均位于 components/card/demo 目录simple.tsx简洁卡片无标题头部flexible-content.tsx更灵活的内容展示含cover与actionsloading.tsx预加载的卡片inner.tsx内部卡片typeinner头部背景与边距不同样式见 genCardTypeInnerStyletabs.tsx带页签的卡片tabList/activeTabKey/onTabChangemeta.tsx使用Card.Meta的avatar/title/description三元组。组件入口 index.tsx 将Card.Grid与Card.Meta挂载到主组件上Card.Grid用于栅格型卡片每项占 33.33% 宽见 genCardGridStyleCard.Meta用于头像 标题 描述结构样式见 genCardMetaStyle。小结典型卡片演示用 20 行代码覆盖了 Card 最常见的三要素titlechildrenextra与双尺寸medium/small。从源码看头部由 title/extra/tabs 三者之一触发渲染extra 靠marginInlineStart: auto右对齐尺寸由useSize合并组件属性与 ConfigProvider 全局值后映射为ant-card-small修饰类再经由headerHeightSM、bodyPaddingSM等 Token 缩小头部与内容区空间。理解这条属性 → 类名 → Token的链路后无论是复刻 basic 演示还是排查尺寸、内边距异常都能直接定位到 Card.tsx 与 style/index.ts 两个文件中的对应实现。【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/GitHub_Trending/an/ant-design创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考