ant-design Card 基础卡片完全指南：标题、内容与操作区域的正确打开方式-北京尧图网络

ant-design Card 基础卡片完全指南标题、内容与操作区域的正确打开方式【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/gh_mirrors/ant/ant-design本篇技术指南聚焦 ant-designAnt Design组件库中 Data Display 分组下的 Card卡片组件的基础用法如何搭建一张同时包含标题title、内容body与右上角操作区extra的标准卡片以及default与small两种尺寸的差异与切换方式。读完本文你将掌握 Card 组件的核心属性组合、源码级的结构原理并能结合 loading、actions、Meta、Tabs 等进阶特性在实际项目中直接落地可复用的卡片布局。一、demo 原文与设计意图在仓库中基础卡片示例位于 components/card/demo/basic.tsx其配套文档 components/card/demo/basic.md 对该示例的定位做了两段说明中文包含标题、内容、操作区域。英文A basic card containing a title, content and an extra corner content. Supports two sizes:defaultandsmall.也就是说这个示例要传达的核心信息是三点标题区title、内容区children、右上角操作区extra外加两种尺寸规格default/small。这是所有 Card 复杂用法网格、标签页、加载态、Meta 元信息等的最小公共骨架。二、基础卡片源码解析basic.tsx的完整代码如下import React from react; import { Card, Space } from antd; const App: React.FC () ( Space directionvertical 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卡片头部标题渲染在ant-card-head-title区域extraa href#More/a右上角操作区渲染在ant-card-extra区域默认靠右对齐sizesmall第二张切换为紧凑尺寸不传或传default则为标准尺寸style{ width: 300 }示例中通过行内样式固定卡片宽度实际项目中可用布局容器控制Spacedirectionvertical size{16}垂直排列两张卡片间距 16px避免示例挤在一起1. 头部head的渲染条件从 components/card/Card.tsx 的实现看头部只有在title、extra、tabList三者至少存在一个时才会渲染if (title || extra || tabs) { head ( div className{${prefixCls}-head} style{mergedHeadStyle} div className{${prefixCls}-head-wrapper} {title div className{${prefixCls}-head-title}{title}/div} {extra div className{${prefixCls}-extra}{extra}/div} /div {tabs} /div ); }因此只传children不传title/extra时Card 会渲染成一张没有头部的极简卡片见 components/card/demo/simple.tsx。extra之所以显示在右上角是因为样式里设置了marginInlineStart: auto见 components/card/style/index.ts 中ant-card-extra规则在 flex 布局下被推向最右侧。2. 内容区bodychildren统一包裹在ant-card-body容器中默认内边距来自 token 的cardPaddingBase即paddingLG。当loading为真时body 内会替换为Skeleton加载骨架paragraph{{ rows: 4 }}见 Card.tsx 中的loadingBlock实现。3. 两种尺寸的本质差异sizesmall不是简单缩小字号而是整套头部/内容区的尺寸 token 切换。在 components/card/style/index.ts 的genCardSizeStyle中可以看到头部最小高度headerHeightSMfontSize * lineHeight paddingXS * 2头部字号headerFontSizeSM即fontSize小于默认的fontSizeLGbody 内边距cardPaddingSM固定 12px源码注释为 Fixed padding.而默认尺寸对应headerHeight、headerFontSize与cardPaddingBase。在组件内部size会经由useSize合并 ConfigProvider 的全局尺寸配置后生成mergedSize并最终体现在根元素 classant-card-small/ant-card-default上见 Card.tsx 的classString拼装逻辑。4. 尺寸与 Tabs 的联动值得注意的源码细节当 Card 同时使用tabList时尺寸还会透传给内部 Tabs——mergedSize为default时 Tabs 用large为small时 Tabs 用small见 Card.tsx 中tabSize的推导。测试用例 components/card/tests/index.test.tsx 中也验证了sizesmall时 Tabs 会应用ant-tabs-smallclass。三、从基础卡片到完整能力矩阵basic.tsx只用了 3 个属性但同一Card组件在 components/card/index.en-US.md 中暴露了完整的 API 面基础用法是理解其余能力的起点属性说明默认值actions底部操作列表ArrayReactNode等宽均分排列-bordered是否渲染边框truecover卡片封面图区域渲染于头部之下、body 之上-hoverable悬停时抬升阴影cursor: pointerboxShadow过渡falseloading内容加载时展示 Skeleton 骨架屏falsesizedefault|smalldefaulttypeinner内嵌卡片用于嵌套场景-tabList/activeTabKey/defaultActiveTabKey/onTabChange/tabBarExtraContent/tabProps卡片内置 Tabs 标签页-classNames/styles5.14.0 起按语义模块header、body、extra、title、actions、cover定制 class 与样式-在 Card.tsx 中还通过React.Children.forEach检测 children 中是否包含Card.Grid并自动添加ant-card-contain-grid使 body 变为 flex 换行布局检测到tabList时添加ant-card-contain-tabs。组合用法示例加载态卡片见 components/card/demo/loading.tsxCard loading{loading} actions{actions} style{{ minWidth: 300 }} Card.Meta avatar{Avatar src... /} titleCard title description... / /Card带封面与元信息的卡片见 components/card/demo/meta.tsxCard style{{ width: 300 }} cover{img altexample src... /} actions{[SettingOutlined keysetting /, EditOutlined keyedit /, EllipsisOutlined keyellipsis /]} Card.Meta avatar{Avatar src... /} titleCard title descriptionThis is the description / /Card内置标签页卡片见 components/card/demo/tabs.tsx通过tabListactiveTabKeyonTabChange受控切换内容tabBarExtraContent可在标签栏右侧追加操作不传title时标签页直接占据头部。网格卡片见 components/card/demo/grid-card.tsx多个Card.Grid子元素自动等宽换行每个 Grid 默认hoverabletrue可用style{{ width: 25% }}自定义宽度。四、组件结构Card、Card.Meta 与 Card.GridCard是一个复合组件从 components/card/index.tsx 可以看到它通过挂载静态属性组合而成Card.Grid Grid; Card.Meta Meta;Card.Meta见 components/card/Meta.tsx由avatar、title、description三部分组成内部渲染为ant-card-meta-avatar与ant-card-meta-detail包含-title、-description两块结构适合展示对象型内容。Card.Grid见 components/card/Grid.tsx渲染为ant-card-grid通过 box-shadow 绘制网格分隔线hover 时抬升为cardShadow。整体 DOM 结构自上而下为head含 head-title 与 extra→cover→body→actions最终渲染在单个div根节点上并支持ref获取。五、Design Token 与样式定制Card 的视觉尺寸与颜色全部走组件级 Token定义于 components/card/style/index.ts 的prepareComponentTokenToken默认值来源含义headerBgtransparent头部背景色headerFontSize/headerFontSizeSMfontSizeLG/fontSize头部字号默认/小号headerHeight/headerHeightSM由字号、行高与 padding 计算头部最小高度actionsBgcolorBgContainer操作区背景actionsLiMarginpaddingSM 0操作项纵向 marginextraColorcolorTextextra 区文字颜色此外还有内部合并 tokencardPaddingBase paddingLG、cardPaddingSM 12、cardShadow boxShadowCard、cardActionsIconSize fontSize。开发者可通过ConfigProvider的theme.components.Card覆盖这些 Token配合 components/card/demo/component-token.tsxdebug 示例查看全部可调项。六、实战小结最小可用卡片Card title... extra{...}content/Card即包含标题、内容、操作区三大区域对应 basic demo 的设计意图。尺寸选择信息密度高的紧凑场景如侧栏、弹窗内嵌用sizesmall常规内容区用默认default二者通过ant-card-smallclass 与对应 Token 生效。进阶组合loading骨架屏、actions底部操作、cover封面、Card.Meta元信息、Card.Grid网格、tabList标签页都建立在基础结构之上可在 components/card/index.en-US.md 查阅完整 API 表在 components/card/demo 目录下查阅全部可运行示例。【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/gh_mirrors/ant/ant-design创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

ant-design Card 基础卡片完全指南：标题、内容与操作区域的正确打开方式

相关推荐

Jenkins节点配置与Java Web项目CI/CD实践指南

三星M16基材+LEAD 2.0，iQOO 16的2K直屏含金量实测

吃透Java泛型：从类型擦除到PECS原则与反射实战

更多资讯

ChatGPT内容转Word文档的5种技术方案详解

AI辅助开题报告修改工具对比与使用指南

SpringBoot+Vue动漫CMS系统开发实践

新型电池技术解析：能量密度与续航突破

美国即时配送服务与iPhone购买全攻略

用Godot复刻10款经典2D游戏：GDScript实战源码全记录

今日更新

AReaL 调试指南：从 Agent Workflow 验证到分布式训练死锁诊断

MATLAB实现GPS L1 C/A信号仿真与二维捕获验证

彻底搞懂ASCII、Unicode与UTF-8：从乱码根源到编码实战

本周精选

AI驱动的自动化专利分析平台技术解析

LeetCode-Go 题解：1252. Cells with Odd Values in a Matrix（奇数值单元格计数）双解法剖析

在线答疑系统Java毕设实战：Spring Boot前后端分离与状态流转

本月热门

基于YOLO的焊缝缺陷检测：从数据标注到工业部署全流程实践

分布式服务的决策记录

创业产品的首版范围

读完文章，想聊聊您的网站？