UI组件前端【免费下载链接】ant-design-blazorA rich set of enterprise-class UI components based on Ant Design and Blazor.项目地址https://gitcode.com/gh_mirrors/an/ant-design-blazor点击查看免费下载在 ant-design-blazor 中Card是最基础、最常用的数据展示容器之一。本文以官方示例典型卡片basic Card为切入点系统讲解如何在 Blazor 项目中搭建一个包含标题、内容与操作区域的卡片深入剖析default与small两种尺寸的用法并结合组件源码Card.razor、Card.razor.cs说明其底层渲染与参数机制。读完本文你将能熟练运用Card及其附属组件Card.Grid、Card.Meta、CardAction完成后台概览页等常见界面的搭建。典型卡片标题、内容与操作区域官方示例典型卡片Basic.md所展示的正是卡片最核心的三段式结构标题Title位于卡片头部用于说明卡片主题内容Body/ChildContent卡片主体区域可承载文字、列表、图片、段落等任意内容操作区域Extra/Actions位于头部右上角或卡片底部的操作入口。同时示例还强调了尺寸控制能力通过size参数设置为default或small即可切换卡片的整体尺寸。基础使用示例参考官方配套示例 Basic.razor一个最简单的典型卡片写法如下Card TitleDefault size card Stylewidth:300px; Extra aMore/a /Extra Body pCard content/p /Body /Card这里用到了三个关键参数Title字符串形式的卡片标题Extra卡片头部右上角的操作区域RenderFragment示例中放入了 More 链接Body卡片主体内容RenderFragment。注意在 Card.razor.cs 中Body已被标记为[Obsolete(Use ChildContent instead)]推荐使用ChildContent承载内容当前版本为兼容旧代码仍保留支持。将ChildContent作为卡片内容的等效写法为Card TitleDefault size card Stylewidth:300px; Extra aMore/a /Extra ChildContent pCard content/p /ChildContent /Card尺寸控制default 与 small示例文档明确指出可通过size控制卡片尺寸取值只有两种对应源码中的枚举 CardSize.cs枚举值说明Default默认尺寸不设置Size时即为此值Small紧凑小尺寸卡片使用方式是在Card标签上设置SizeCardSize.SmallCard SizeCardSize.Small TitleSmall size card Stylewidth:300px; Extra aMore/a /Extra ChildContent pCard content/p /ChildContent /Card从源码角度看Size参数定义在 Card.razor.cs并在SetClassMap()方法Card.razor.cs中通过ClassMapper.If(ant-card-small, () Size CardSize.Small)为卡片追加ant-card-smallCSS 类进而由样式表components/card/style/目录下的 less 文件统一收紧内边距、字号等视觉尺寸。因此small生效的本质是切换了样式类而不是渲染不同的 DOM 结构。自定义标题模板TitleTemplate除了字符串标题示例还演示了如何用TitleTemplate渲染富标题——在标题中插入图标等任意 Razor 内容Card Stylewidth:300px; TitleTemplate Icon TypeIconType.Outline.CreditCard / Title is Template /TitleTemplate Extra aMore/a /Extra ChildContent pCard content/p /ChildContent /Card或者将模板定义为可复用的RenderFragment变量再传入Card SizeCardSize.Small TitleTemplatetitleTemplate Stylewidth:300px; Extra aMore/a /Extra ChildContent pCard content/p /ChildContent /Card code { RenderFragment titleTemplate divIcon TypeIconType.Outline.CreditCard / Title is Template/div; }在 Card.razor 的头部渲染逻辑中TitleTemplate优先于Title显示只有当TitleTemplate、Title、Extra或卡片内嵌 Tabs_cardTabs至少存在其一ant-card-head头部区域才会被渲染。这一优先级关系也适用于其他成对参数如Actions与ActionTemplate。结合源码看 Card 的完整参数体系官方 API 文档 index.zh-CN.md 列出了Card的完整参数结合 Card.razor.cs 源码可将常用参数整理如下参数说明类型默认值Title卡片标题string-TitleTemplate标题内容模板优先于TitleRenderFragment-Extra卡片右上角操作区域RenderFragment-Body卡片主体内容已标记 Obsolete建议用ChildContentRenderFragment-ChildContent卡片主体内容RenderFragment-Actions卡片底部操作组每个操作均分宽度IListRenderFragment空列表ActionTemplate放置CardAction组件的操作区模板优先于ActionsRenderFragment-Cover卡片封面显示在头部之下、主体之上RenderFragment-Bordered是否显示边框booltrueHoverable鼠标移过时是否浮起悬停效果boolfalseLoading内容加载中时显示骨架屏占位boolfalseSize卡片尺寸default或smallCardSizeDefaultType卡片类型可设置为inner内嵌卡片或默认CardTypeDefaultBodyStyle主体区域自定义样式string-操作区域Actions的渲染细节在 Card.razor 中卡片底部的操作区渲染遵循ActionTemplate优先其次Actions列表的规则if (ActionTemplate ! null) { ul classant-card-actions ActionTemplate /ul } else if (Actions.Count 0) { ul classant-card-actions foreach (var action in Actions) { li style($width:{100 / Actions.Count}%) spanaction/span /li } /ul }即通过Actions传入的多个操作项会在底部操作条内等宽100 / Actions.Count排列而ActionTemplate则配合 CardAction 组件使用——CardAction在初始化时通过级联参数调用Card.AddCardAction(this)注册自身适合在模板中自由组合操作图标与文字。Loading 状态与骨架屏当Loadingtrue时Card.razor 的主体区域不再渲染真实内容而是渲染Skeleton Loading Active ParagraphRows4 Titlefalse以骨架屏占位提示数据加载中。结合ClassMapper中.If(ant-card-loading, () Loading)卡片整体还会挂上ant-card-loading样式类。类型与悬停等外观控制Type对应枚举 CardType.cs设置CardType.Inner时卡片会追加ant-card-type-inner类用于在卡片内部嵌套内嵌卡片Hoverable默认false开启后追加ant-card-hoverable类鼠标移过时卡片浮起Bordered默认true关闭后追加/移除ant-card-bordered类以控制边框。组合延伸Card.Grid 与 Card.Meta除了基础典型卡片ant-design-blazor 的 Card 家族还提供两个常用子组件用于构建更丰富的界面CardGrid在Card中放置多个CardGrid可形成网格布局容器会因此追加ant-card-contain-grid类由Card.MarkHasGrid()标记见 Card.razor.cs官方配套示例见 Grid.mdCardMeta用于渲染头像 标题 描述的标准卡片元信息结构支持Avatar/AvatarTemplate、Title/TitleTemplate、Description/DescriptionTemplate三组成对参数模板优先实现见 CardMeta.razor配套示例见 Support.md。此外仓库还提供 Simple.md极简卡片、Noborder.md无边框、Loading.md加载占位、Inner.md内嵌卡片、Tabs1.md卡片内嵌页签等更多场景示例可在仓库site/AntDesign.Docs/Demos/Components/Card/demo/目录下按需查阅。小结典型卡片 TitleChildContent或BodyExtra三要素即可覆盖绝大多数展示场景尺寸控制只需设置SizeCardSize.Small或省略使用默认的Default其底层通过切换ant-card-small样式类实现富标题使用TitleTemplate模板形式与字符串形式可自由混用底部操作区使用Actions等宽排列或ActionTemplateCardAction加载中可用Loading一键切换为骨架屏美观且零额外代码。以上用法均以当前仓库源码为据组件实现见 Card.razor 与 Card.razor.cs完整参数表见 index.zh-CN.md可直接复制示例代码到自己的 Blazor 项目中运行验证。赞分享UI组件前端【免费下载链接】ant-design-blazorA rich set of enterprise-class UI components based on Ant Design and Blazor.项目地址https://gitcode.com/gh_mirrors/an/ant-design-blazor点击查看免费下载相关推荐Ant Design Blazor Card 组件典型卡片实战指南标题、内容与操作区域的标准用法与尺寸控制Ant Design Blazor Card 组件典型卡片实战指南标题、内容与操作区域的标准用法与尺寸控制 本文围绕 Ant Design Blazor 组件前端UI组件设计系统Ant Design Card 典型卡片实践标题、extra 操作区与 medium/small 双尺寸的完整解析Ant Design Card 典型卡片实践标题、extra 操作区与 medium/small 双尺寸的完整解析 本篇基于 ant design 仓库中 C前端UI组件设计系统Composer 代理配置完全指南http_proxy / no_proxy / CGI_HTTP_PROXY 原理与实战Composer 代理配置完全指南http_proxy / no_proxy / CGI_HTTP_PROXY 原理与实战 导读 在企业内网、隔离网络或受限出前端UI组件设计系统上一篇AionUi ACP 单聊权限与安全机制全解析审批卡片、YOLO 免确认模式与待确认恢复下一篇DeepKE 标准关系抽取数据准备全指南JSON、XLSX、CSV 三种数据格式与格式转换工具实战创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考